Dropzone Envoyer le bouton sur le téléchargement

Question

Je veux ajouter un bouton de téléchargement à mon téléchargeur de fichier dropzone. Actuellement, il télécharge le fichier directement après avoir sélectionné ou déplacé le fichier dans la zone de dépôt. Ce que je veux faire est: 1. Sélectionnez ou drapez le fichier à télécharger. 2. Validez 3. Appuyez sur ou sur le bouton Télécharger pour télécharger le fichier. N.B: Le fichier ne peut être téléchargé qu'après avoir appuyé sur le bouton de téléchargement.

Voici ma forme

<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 post 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

Vous devez:

1. Ajouter un bouton:

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

2. Dites Dropzone ne pas télécharger le fichier lorsque vous déposez. Cela se fait avec the autoProcessQueue config option:

   autoProcessQueue: false 
   

3. Depuis Dropzone sera pas automatiquement télécharger les fichiers, vous devez dire manuellement faire que lorsque vous cliquez sur le bouton. Donc, vous avez besoin d'un gestionnaire d'événements pour ce bouton clic:

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

4. Ce sera juste POST le fichier téléchargé, sans vos autres champs d'entrée. Vous souhaitez probablement afficher tous les champs, par exemple votre refCampaignID, etc. Pour ce faire, vous devez les copier dans le POST avant de l'envoyer. Dropzone a un sending event 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 le tout 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); 
      }); 
     }); 
    } 
}