javascript - Dropzone previews not displaying in preview zone -
i'm progromatically implementing dropzone form using matias meno's tutorial here: https://github.com/enyo/dropzone/wiki/combine-normal-form-with-dropzone.
the previews failing display in preview-zone div , i'm not sure why.
html:
<form id="my-awesome-dropzone" action="/uploads" class="dropzone"> <fieldset name="contact-form-fieldset"> <legend><h1>request services</h1></legend> <ul> <li class="contact-form-fieldset-title">full name</li> <li><input type="text" name="name" id="contact-form-name" class="plain buffer"></li> <li class="contact-form-fieldset-title"> <li class="contact-form-fieldset-title">email</li> <li><input type="email" name="email" id="contact-form-email" class="plain buffer"></li> <li class="contact-form-fieldset-title">phone</li> <li><input type="text" name="phone" id="contact-form-phone" class="plain buffer"></li> <li class="contact-form-fieldset-title">describe problem device</li> <li> <textarea class="plain buffer" id="styled" name="styled-textarea"></textarea> </li> <li> <div class="dropzone-previews"></div> <!-- previews should shown. --> </li> </ul> <div id="contact-form-fieldset-button"> <button type="submit">submit data , files!</button> </div> </fieldset> <p>in hurry? call 632-345-674</p> </form>
<script src="../js/dropzone.js"></script> <script src="../js/uploader.js"></script>
the uploader.js file contains matias' original code:
dropzone.options.myawesomedropzone = { // camelized version of id of form element // configuration we've talked above autoprocessqueue: false, uploadmultiple: true, paralleluploads: 100, maxfiles: 100, // setting of dropzone init: function() { var mydropzone = this; // first change button tell dropzone process queue. this.element.queryselector("button[type=submit]").addeventlistener("click", function(e) { // make sure form isn't being sent. e.preventdefault(); e.stoppropagation(); mydropzone.processqueue(); }); // listen sendingmultiple event. in case, it's sendingmultiple event instead // of sending event because uploadmultiple set true. this.on("sendingmultiple", function() { // gets triggered when form being sent. // hide success button or complete form. }); this.on("successmultiple", function(files, response) { // gets triggered when files have been sent. // redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // gets triggered when there error sending files. // maybe show form again, , notify user of error }); }}
anybody have suggestions?
thanks!
try previewscontainer: ".dropzone-previews"
Comments
Post a Comment