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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -