Multiple dropzone.js - single page

Question

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

Solution 1

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(); }
  }
};

Solution 2

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" });