Rather than having multiple file uploads on a single dropzone element - is it possible to have multiple dropzone elements on a single page?

It seems dropzone isn't even triggering after the select dialog when there are multiple elements,each with their own dropzone initialized

Rather than having multiple file uploads on a single dropzone element - is it possible to have multiple dropzone elements on a single page?

It seems dropzone isn't even triggering after the select dialog when there are multiple elements,each with their own dropzone initialized

• javascript
• jquery
• dropzone.js

Share Improve this question Follow asked Nov 13, 2013 at 4:10 inaina 19.5k4141 gold badges127127 silver badges208208 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The typical way of using dropzone is by creating a form element with the class dropzone:

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

That's it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. You can then access the dropzone element like so:

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

As far as i know , you can create your own dropzone , then it's possible to have multiple dropzone elements.

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

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

Yes, you can have an unlimited amount of dropzones on a single page.

Example:

<form action="/controller/action">
    <div class="dropzoner" id="dropzone1"></div>
    <div class="dropzoner" id="dropzone2"></div>
</form>

<script>
Dropzone.autoDiscover = false; // Very important

InitializeDropzones();

function InitializeDropzones() { // You only need to encapsulate this in a function if you are going to recall it later after an ajax post.
    Array.prototype.slice.call(document.querySelectorAll('.dropzoner'))
        .forEach(element => {

        if (element.dropzone) {
            element.dropzone.destroy();
        } // This is only necessary if you are going to use ajax to reload dropzones. Without this, you will get a "Dropzone already exists" error.

        var myDropzone = new Dropzone(element, {
            url: "/controller/action",
            headers: {
                "headerproperty": value,
                "headerproperty2": value2
            },
        });
    })
}
</script>

Some notes that might save someone time when dealing with multiple dropzones:

After reloading any elements via ajax that have a dropzone attached to them, you will need to reinitialize that dropzone onto the element.

For instance:

myDropzone.on("success", function (response) {
         toastr[show a toastr];
         $("#ContainerThatHasDropzones").load("/controller/action/" + id, function() {
         Dropzone.discover(); // This is very important. The dropzones will not work without this after reloading via ajax.
         InitializeDropzones();
});