javascript - Dynamic Form with multiple dropzone.js -


i creating servlet application jsp has form "objects". each object has multiple input fields , image upload zone, picked dropzone.js job. user can add many objects wants , done dynamically javascript. when first load form there object coded within jsp page.

i have managed code input boxes, image upload part giving me hard time , can't make work. javascript knowledge low , having hard time understanding how should connect dropzones servlet.

what should javascript in order have dropzones working properly?

another question if should every dropzone ajax in order have images uploaded when form submitted (i'm thinking because there can multiple objects multiple pictures).

anyways here have far:

jsp/html

  <div class="form-group">   <div class="dropzone" id="image-upload">     <div class="dz-default dz-message file-dropzone text-center col-sm-12">       <span class="glyphicon glyphicon-paperclip"></span> <span>                                 attach files, drag , drop here</span><br> <span>or</span><br>       <span>just click</span>     </div>      <!-- previews should shown. -->     <div class="dropzone-previews"></div>   </div> </div> </div> </form> <div class="text-center">   <button type="submit" class="btn btn-lg btn-primary" form="primaryform" id="submit-all">create pdf</button> </div> 

javascript

   dropzone.options.imageupload = {         url: "/generated.jsp",         autoprocessqueue: false,         uploadmultiple: true,         paralleluploads: 100,         maxfiles: 100,         acceptedfiles: "image/*",          init: function () {              var submitbutton = document.queryselector("#submit-all");             var wrapperthis = this;              submitbutton.addeventlistener("click", function () {                 wrapperthis.processqueue();             });              this.on("addedfile", function (file) {                  // create remove button                 var removebutton = dropzone.createelement("<button class='btn btn-lg dark'>remove file</button>");                  // listen click event                 removebutton.addeventlistener("click", function (e) {                     // make sure button click doesn't submit form:                     e.preventdefault();                     e.stoppropagation();                       wrapperthis.removefile(file);                 });                  // add button file preview element.                 file.previewelement.appendchild(removebutton);             });         }     }; 

thanks in advance!


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -