Asad Ali Bhatti Asad Ali Bhatti - 5 months ago 144
Javascript Question

want to create multiple dropzones using dropzone.js

i am making a comparison app which have two different drag & drop areas. each one should act like a single drop zone (to replace or remove each image).


var previewaDropzone = new Dropzone("div#previewa",{url:'/url1.json'});
var previewbDropzone = new Dropzone("div#previewb",{url:'/url2.json'});

but dropzone throw exception

Dropzone already attached.

Note: i cant use templates of dropzone.js because both areas are on different places

any way to achieve given above functionality using Dropzone?


From the Dropzone FAQ

I get the error "Dropzone already attached." when creating the Dropzone.

This is most likely due to the autoDiscover feature of Dropzone.

When Dropzone starts, it scans the whole document, and looks for elements with the dropzone class. It then creates an instance of Dropzone for every element found. If you, later on, create a Dropzone instance yourself, you'll create a second Dropzone which causes this error.

So you can either:

Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or
Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled,

and configure your Dropzone in the init option of your configuration.

Further down the FAQ you can see an example of the init() function which you can use like this:

  // previewa is the configuration for the element that has an id attribute
  // with the value previewa
  Dropzone.options.previewa = {
    init: function() {
      Dropzone.options.previewaDropzone = false;