I am declaring dropzones imperatively:
var myDropzone = new Dropzone('*[data-elementtype="ainote_dropzone"]', { url: 'someurl', ai_id: '', text: '',
init: function() {
let thisDropzone = this;
this.on('sendingmultiple', function(file, xhr, formData){
formData.append('ai_id', thisDropzone.ai_id);
formData.append('text', thisDropzone.text);
});
this.on('complete', function() {
this.removeAllFiles()
});
},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
addRemoveLinks: true,
previewsContainer: '#ainote_dropzone_previews'
});
I have two divs on the page that match the selector. I want both to act exactly the same way. Anyway, only the one that comes first in the HTML code works. When I remove the first one, the other one starts working.
Is this normal behaviour? I believe it should be possible to bind one Dropzone instance to several divs, right?