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
Post a Comment