jquery - Dropzone Invalid Dropzone Element -


i'm trying setup dropzone on site, using example code given on dropzone website (http://www.dropzonejs.com/bootstrap.html). error:

invalid dropzone element

i can see 3 buttons load , disappear , empty 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">                         <!-- used 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 whole body dropzone         url: "/target-url",         thumbnailwidth: 80,         thumbnailheight: 80,         paralleluploads: 20,         previewtemplate: previewtemplate,         autoqueue: false, // make sure files aren't queued until manually added         previewscontainer: "#previews", // define container display previews         clickable: ".fileinput-button" // define element should used click trigger select files.     });      mydropzone.on("addedfile", function (file) {         // hookup start button         file.previewelement.queryselector(".start").onclick = function () { mydropzone.enqueuefile(file); };     });      // update total progress bar     mydropzone.on("totaluploadprogress", function (progress) {         document.queryselector("#total-progress .progress-bar").style.width = progress + "%";     });      mydropzone.on("sending", function (file) {         // show total progress bar when upload starts         document.queryselector("#total-progress").style.opacity = "1";         // , disable start button         file.previewelement.queryselector(".start").setattribute("disabled", "disabled");     });      // hide total progress bar when nothing's uploading anymore     mydropzone.on("queuecomplete", function (progress) {         document.queryselector("#total-progress").style.opacity = "0";     });      // setup buttons transfers     // "add files" button doesn't need setup because config     // `clickable` has been specified.     document.queryselector("#actions .start").onclick = function () {         mydropzone.enqueuefiles(mydropzone.getfileswithstatus(dropzone.added));     };     document.queryselector("#actions .cancel").onclick = function () {         mydropzone.removeallfiles(true);     }; </script> 

change

var mydropzone = new dropzone(document.section, { // make whole body dropzone 

to

var mydropzone = new dropzone(document.body, { // make whole body dropzone 

also provide valid existing element clickable option


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -