Dropzone - multiple instances get id - forms

Question

I have multiple dropzone forms
<form action="/upload" class="dropzone" id="group1"></form>
<form action="/upload" class="dropzone" id="group2"></form>
<form action="/upload" class="dropzone" id="group3"></form>
How do I get the id of the form the file is dropped into?

Answer 1

To hook into a Dropzone action like a file being added, you'll need to use an event handler. From the docs:
Dropzone triggers events when processing files, to which you can register easily, by calling .on(eventName, callbackFunction) on your instance.
So you'll need to manually instantiate your Dropzones, to get access to the instance.
If you're using jQuery:
// Don't automatically instantiate, we'll do it manually
Dropzone.autoDiscover = false;
// Using the jQuery syntax shown in the docs
$("#group1, #group2, #group3").dropzone({
init: function() {
var formID = this.element.attributes.id;
this.on("addedfile", function(file) {
console.log('Image dropped on form ID', formID);
});
}
});
If you're not using jQuery:
Dropzone.autoDiscover = false;
var dz = [],
forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
dz[i] = new Dropzone(forms[i], {
init: function() {
var formID = this.element.attributes.id;
this.on("addedfile", function(file) {
console.log('Image dropped on form', formID);
});
}
});
}