Bouton de soumission Dropzone lors du téléchargement

Question

Je veux ajouter un bouton de téléchargement à mon programme de téléchargement de fichiers dropzone. actuellement, il télécharge le fichier directement après avoir sélectionné ou fait glisser le fichier dans la zone de dépôt. Ce que je veux faire, c'est: 1. Sélectionnez ou drapez le fichier à télécharger. 2. Validez. 3. Appuyez ou appuyez sur le bouton Télécharger pour télécharger le fichier.

N.B: le fichier est uniquement téléchargé après avoir appuyé sur le bouton de téléchargement.

Voici mon formulaire

<form id='frmTarget' name='dropzone' action='upload_files.php' class='dropzone'>
   <div class='fallback'>
      <input name='file' type='file' multiple />
   </div>
   <input id='refCampaignID' name='refCampaignID' type='hidden' value=\ "$rowCampaign->CampaignID\" />
</form>

Voici mon JS

Dropzone.options.frmTarget = 
    {
            url: 'upload_files.php',
            paramName: 'file',
            clickable: true,
            maxFilesize: 5,
            uploadMultiple: true, 
            maxFiles: 2,
            addRemoveLinks: true,
            acceptedFiles: '.png,.jpg,.pdf',
            dictDefaultMessage: 'Upload your files here',
            success: function(file, response)
            {
                setTimeout(function() {
                    $('#insert_pic_div').hide();
                    $('#startEditingDiv').show();
                }, 2000);
            }
        };

Voici ma demande de publication php

 foreach ($_FILES["file"] as $key => $arrDetail) 
   {
      foreach ($arrDetail as $index => $detail) {
         //print_rr($_FILES["file"][$key][$index]);
         $targetDir = "project_images/";
         $fileName = $_FILES["file"]['name'][$index];
         $targetFile = $targetDir.$fileName;

         if(move_uploaded_file($_FILES["file"]['tmp_name'][$index],$targetFile))
         {
            $db = new ZoriDatabase("tblTarget", $_REQUEST["TargetID"], null, 0);
            $db->Fields["refCampaignID"] = $_REQUEST["refCampaignID"];
            $db->Fields["strPicture"] = $fileName;
            $db->Fields["blnActive"] = 1;
            $db->Fields["strLastUser"] = $_SESSION[USER]->USERNAME;
            $result = $db->Save();

            if($result->Error == 1){
               return "Details not saved.";
            }else{
               return "Details saved.";
            }
         }else{
            return "File not uploaded.";
         }
      }
   }

Answer 1

Tu dois:

1. Ajoutez un bouton:

   <button type="submit" id="button" class="btn btn-primary">Submit</button>
   

2. Dites à Dropzone de ne pas télécharger automatiquement le fichier lorsque vous le déposez, comme il le fera par défaut. Cela se fait avec l'option autoProcessQueue config :

   autoProcessQueue: false
   

3. Étant donné que Dropzone ne téléchargera plus automatiquement les fichiers, vous devez lui dire manuellement de le faire lorsque vous cliquez sur votre bouton. Vous avez donc besoin d'un gestionnaire d'événements pour ce clic de bouton, qui indique à Dropzone de faire le téléchargement:

   $("#button").click(function (e) {
       e.preventDefault();
       myDropzone.processQueue();
   });
   

4. Cela ne fera que POST le fichier téléchargé, sans aucun de vos autres champs de saisie. Vous voudrez probablement publier tous les champs, par exemple votre refCampaignID, un jeton CSRF si vous en avez un, etc. Pour ce faire, vous devez les copier dans le POST avant l'envoi. Dropzone a un sending event qui est appelé juste avant chaque fichier est envoyé, où vous pouvez ajouter un rappel:

   this.on('sending', function(file, xhr, formData) {
       // Append all form inputs to the formData Dropzone will POST
       var data = $('form').serializeArray();
       $.each(data, function(key, el) {
           formData.append(el.name, el.value);
       });
   });
   

Mettre tous ensemble:

Dropzone.options.frmTarget = {
    autoProcessQueue: false,
    url: 'upload_files.php',
    init: function () {

        var myDropzone = this;

        // Update selector to match your button
        $("#button").click(function (e) {
            e.preventDefault();
            myDropzone.processQueue();
        });

        this.on('sending', function(file, xhr, formData) {
            // Append all form inputs to the formData Dropzone will POST
            var data = $('#frmTarget').serializeArray();
            $.each(data, function(key, el) {
                formData.append(el.name, el.value);
            });
        });
    }
}