Initialiser dropzone après avoir chargé le formulaire

Question

J'utilise jquery dropzone.js. Pour charger le formulaire j'utilise mustache comme ci-dessous. Mais je ne peux pas innit la zone de dépôt après que la page soit complètement chargée car il n'y a aucun formulaire chargé sur ce moment. Y a-t-il une option pour initier la dropzone après qu'elle soit chargée?

fichier Mustache avec le formulaire:

<div class="col-lg-12"> 
    <div class="ibox float-e-margins"> 
     <div class="ibox-title"> 
      <h5>Dropzone Area</h5> 
      <div class="ibox-tools"> 
       <a class="collapse-link"> 
        <i class="fa fa-chevron-up"></i> 
       </a> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
        <i class="fa fa-wrench"></i> 
       </a> 
       <ul class="dropdown-menu dropdown-user"> 
        <li><a href="#">Config option 1</a> 
        </li> 
        <li><a href="#">Config option 2</a> 
        </li> 
       </ul> 
       <a class="close-link"> 
        <i class="fa fa-times"></i> 
       </a> 
      </div> 
     </div> 
     <div class="ibox-content"> 
      <form id="my-awesome-dropzone" class="dropzone" action="#"> 
       <div class="dropzone-previews"></div> 
       <button type="submit" class="btn btn-primary pull-right">Submit this form!</button> 
      </form> 
      <div> 
       <div class="m text-right"><small>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews: <a href="https://github.com/enyo/dropzone" target="_blank">https://github.com/enyo/dropzone</a></small> </div> 
      </div> 
     </div> 
    </div> 
</div> 

Les fonctions pour charger la moustache et init dropzone:

<script> 
    $(document).ready(function() { 
     // get the mustache 
     loadDropZone(); 

     // HOW CAN I DO THIS AFTER THE DROPZONE FORM IS CREATED? 
     // init dropzone 
     Dropzone.options.myAwesomeDropzone = { 

      autoProcessQueue: false, 
      uploadMultiple: true, 
      parallelUploads: 100, 
      maxFiles: 100, 

      // Dropzone settings 
      init: function() { 
       var myDropzone = this; 

       this.element.querySelector("button[type=submit]").addEventListener("click", function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        myDropzone.processQueue(); 
       }); 
       this.on("sendingmultiple", function() { 
       }); 
       this.on("successmultiple", function (files, response) { 
       }); 
       this.on("errormultiple", function (files, response) { 
       }); 
      } 

     } 

    }); 

    function loadDropZone() { 
     $.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) { 
      Mustache.parse(template); // speeds up future uses 
      var rendered = Mustache.render(template); 
      $('#block-container').append(rendered); 
     }); 
    } 
</script> 

Answer 1

Vous devez initialiser dropzone programatically au lieu d'utiliser les options et la fonction de découverte automatique.

devrait ressembler à ceci:

<script> 
    Dropzone.autoDiscover = false; // This is optional in this case 

    $(document).ready(function() { 
     // get the mustache 
     loadDropZone(); 

     // Now that the form is loaded you can initialize dropzone by creating an instance 
     // init dropzone 
     var myAwesomeDropzone = new Dropzone("form#my-awesome-dropzone", { 

      autoProcessQueue: false, 
      uploadMultiple: true, 
      parallelUploads: 100, 
      maxFiles: 100, 

      // Dropzone settings 
      init: function() { 
       var myDropzone = this; 

       this.element.querySelector("button[type=submit]").addEventListener("click", function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        myDropzone.processQueue(); 
       }); 
       this.on("sendingmultiple", function() { 
       }); 
       this.on("successmultiple", function (files, response) { 
       }); 
       this.on("errormultiple", function (files, response) { 
       }); 
      } 

     } 

    }); 

    function loadDropZone() { 
     $.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) { 
      Mustache.parse(template); // speeds up future uses 
      var rendered = Mustache.render(template); 
      $('#block-container').append(rendered); 
     }); 
    } 
</script>