dropzone.js Bootstrap-modal - Fehler: Dropzone bereits angebracht - wenn modal Lasten

Question

Ich bin neu

dropzone.js Ich habe eine Seite erstellt, die Datentabellen verwendet aus verschiedenen Einträgen für den Benutzer die Daten anzuzeigen. Sobald der Benutzer einen Eintrag auswählt, wird das Bootstrap-Modal ausgelöst. Das modale from muss einen Dropzone-Bereich enthalten, der Dateien anzeigt, die sich bereits auf dem Server befinden.

Ich erhalte einen Fehler von Error: Dropzone already attached.. Ich habe Dropzone.autoDiscover = false; am Anfang des Skripts gesetzt.

Also für die Faust Element ausgewählt die modale mit der Info öffnet, wenn ein anderes Produkt nach dem gewählt ist, dass die modale nicht geöffnet und ich erhalte die Fehler Dropzone already attached

Mein modal

<!-- Bootstrap modal - Add/Edit --> 
<div class="modal fade" id="modal_form" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h3 class="modal-title">Disbursement</h3> 
     </div> 
     <div class="modal-body form"> 
      <div id="the-message"></div> 
      <form action="#" id="form" class="form-horizontal"> 
       <input type="hidden" value="" name="disb_id"/> 
       <div class="form-body"> 
        <div class="form-group"> 
         <label class="control-label col-md-3">Date</label> 
         <div class="col-md-9"> 
          <input name="dod" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text"> 
          <span class="help-block"></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="control-label col-md-3">Description</label> 
         <div class="col-md-9"> 
          <textarea name="descript" placeholder="Description" class="form-control"></textarea> 
          <span class="help-block"></span> 
         </div> 
        </div> 
        </form> 
        <div class="form-group"> 
         <div class="col-md-12"> 
         <!--Add Dropzone here--> 
         <div id="disb_drop" class="dropzone"></div> 
         <div id="receipt"></div> 
         </div> 
        </div> 
       </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> 
      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

Mein JS

Dropzone.autoDiscover = false; 
    //some code for datatable...   
function edit_disburs(id) 
{ 
    save_method = 'update'; 
    //reset_form 


    function dist_cal(){ //some code 
    } 

    function calVAT(){ // some code   
    } 

    function getReceipt(fileID){ 

     var myDropzone = new Dropzone('div#disb_drop',{ 
      url : "<?php echo site_url("disburs/upload"); ?>", 
      acceptedFiles: "image/*", 
      addRemoveLinks: true, 
      dictDefaultMessage: "Drop files here to upload or Click here", 
      enqueueForUpload: true, 
     }, 
     function(){ 
      var self = this; 
      $.getJSON("<?php echo site_url("disburs/list_files") ?>/" + fileID, function(data){ 
       if(data.length > 0){ 
       console.log(data) 
        $.each(data, function(key,value) { 
         alert(console.log("index", key, "value", value)); 
         var mockFile = { name: value.name, size: value.size }; 
         self.emit("addedfile", mockFile); 
         self.emit("thumbnail", mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name); 
         self.createThumbnailFromUrl(mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name); 
         self.emit("complete", mockFile); 
        }); 
       } 
      }); 
     }); 
    } 


    //Ajax Load data from ajax 
    $.ajax({ 
    url : "<?php echo site_url('disburs/ajax_edit/')?>/" + id, 
    type: "GET", 
    dataType: "JSON", 
    success: function(data) 
    { 
     getReceipt(data.receipt); 
     //some code to assign data to inputs 

     } 

     $('#modal_form').modal('show'); // show bootstrap modal when complete loaded 
     $('.modal-title').text('Edit Disbursement'); // Set title to Bootstrap modal title 

    }, 
    error: function (jqXHR, textStatus, errorThrown) 
    { 
     alert('Please select an entry to edit'); 
    } 
}); 
} 

Answer 1

ich fand, dass Dropzone für PHP einige gute Unterstützung hat.

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.

Bitte versuchen Sie auf diese Weise, hier ich nicht Dropzone.autoDiscover = false; verwenden habe ich diese Art und Weise genutzt haben.

// "myAwesomeDropzone" is the camelized version of the HTML element's ID 
Dropzone.options.myAwesomeDropzone = { 
    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 2, // MB 
    accept: function(file, done) { 
    if (file.name == "justinbieber.jpg") { 
     done("Naha, you don't."); 
    } 
    else { done(); } 
    } 
}; 

Ich hoffe, das wird Ihnen helfen.

Dropzone.options.myAwesomeDropzone = { 
     paramName: "file", 
     maxFilesize: 10, 
     url: 'UploadImages', 
     previewsContainer: "#dropzone-previews", 
     uploadMultiple: true, 
     parallelUploads: 5, 
     maxFiles: 20, 
     init: function() { 
      var cd; 
      this.on("success", function (file, response) { 
       $('.dz-progress').hide(); 
       $('.dz-size').hide(); 
       $('.dz-error-mark').hide(); 
       console.log(response); 
       console.log(file); 
       cd = response; 
      }); 

       ....... 

Ich habe ein fiddle gemacht für you.You die Optionen anpassen können. Bitte schau es dir an. Und lesen Sie this forum