Home How to use dropzone inside a form?
Reply: 1

How to use dropzone inside a form?

sank Published in 2018-01-05 04:11:04Z

I want to use dropzone inside a form and submit images along with the form submit. So I used as shown below but this way it will accept the image if it drops anywhere in the form. But I want to allow the user only drop their image in "dropClickable" div. How can I achieve that?

<form enctype="multipart/form-data" action="action" accept-charset="UTF-8" method="post" novalidate="novalidate" class="dropzone">
  <div class="row">
     <div class="col-xs-10">
    <div class="col-xs-2" id="dropClickable">
        Drop Your File here...!!

I have already try this

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

but this way it will submit images on other path and I want to submit images only with a form with other form data.

Please help me!

Manishh Reply to 2018-01-05 06:31:27Z

You need to do some configuration in order to achieve that

autoProcessQueue: false

Here are those configurations:

  • autoProcessQueue: false Dropzone should wait for the user to click a button to upload
  • uploadMultiple: true Dropzone should upload all files at once (including the form data) not all files individually
  • parallelUploads: 100 that means that they shouldn't be split up in chunks as well
  • maxFiles: 100 this is to make sure that the user doesn't drop more files than allowed in one request.

Have a look at below code

Dropzone.options.myAwesomeDropzone = {
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  init: function() {
   // Do your update and process stuff
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306286 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO