Dropzone Invalid Dropzone Element

Question

Я пытаюсь настроить Dropzone на моем сайте, используя пример кода, приведенный на веб-сайте dropzone (http://www.dropzonejs.com/bootstrap.html). Я получаю сообщение об ошибке:

Invalid Dropzone Element

Я могу видеть нагрузку три кнопки сначала, а затем они исчезают, и я получаю пустой DIV.

  <div class="sixteen columns omega"> 
      <div class="page"> 
       <div class="page-inner" id="dropzone"> 
        <div class="table table-striped" class="files" id="previews"> 
         <div id="template" class="file-row"> 
         <!-- This is used as the file preview template --> 
         <div> 
          <button class="btn btn-primary start"> 
           <i class="glyphicon glyphicon-upload"></i> 
           <span>Start</span> 
          </button> 
          <button data-dz-remove class="btn btn-warning cancel"> 
           <i class="glyphicon glyphicon-ban-circle"></i> 
           <span>Cancel</span> 
          </button> 
          <button data-dz-remove class="btn btn-danger delete"> 
          <i class="glyphicon glyphicon-trash"></i> 
          <span>Delete</span> 
          </button> 
         </div> 
         </div> 
        </div> 
       </div> 
       <div class="clearfix"></div> 
      </div> 
     </div> 

<script type="text/javascript"> 
    var previewNode = document.querySelector("div#template"); 
    previewNode.id = ""; 
    var previewTemplate = previewNode.parentNode.innerHTML; 
    previewNode.parentNode.removeChild(previewNode); 

    var myDropzone = new Dropzone(document.section, { // Make the whole body a dropzone 
     url: "/target-url", 
     thumbnailWidth: 80, 
     thumbnailHeight: 80, 
     parallelUploads: 20, 
     previewTemplate: previewTemplate, 
     autoQueue: false, // Make sure the files aren't queued until manually added 
     previewsContainer: "#previews", // Define the container to display the previews 
     clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files. 
    }); 

    myDropzone.on("addedfile", function (file) { 
     // Hookup the start button 
     file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); }; 
    }); 

    // Update the total progress bar 
    myDropzone.on("totaluploadprogress", function (progress) { 
     document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; 
    }); 

    myDropzone.on("sending", function (file) { 
     // Show the total progress bar when upload starts 
     document.querySelector("#total-progress").style.opacity = "1"; 
     // And disable the start button 
     file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); 
    }); 

    // Hide the total progress bar when nothing's uploading anymore 
    myDropzone.on("queuecomplete", function (progress) { 
     document.querySelector("#total-progress").style.opacity = "0"; 
    }); 

    // Setup the buttons for all transfers 
    // The "add files" button doesn't need to be setup because the config 
    // `clickable` has already been specified. 
    document.querySelector("#actions .start").onclick = function() { 
     myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); 
    }; 
    document.querySelector("#actions .cancel").onclick = function() { 
     myDropzone.removeAllFiles(true); 
    }; 
</script> 

Answer 1

изменение

var myDropzone = new Dropzone(document.section, { // Make the whole body a dropzone 

в

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone 

также предоставить действительный существующий элемент для интерактивных опций