Dropzone "Addedfile" Is Not Fired When Adding Images Programatically
I Want to Add Checkbox to Dropzone Images So That I Can Upload Only the Selected Ones. I Am Going to Add a Checkbox Next to Each Image When the Addedfile Event...
I want to add checkbox to dropzone images so that I can upload only the selected ones. I am going to add a checkbox next to each image when the addedfile event is fired.
I am using the following method to programmatically add images to dropzone:
var mockFile = { name: "image.jpg", size: 12345 };
imgUrl = ""
myDropzone.options.addedfile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, imgUrl);
The problem is that the "addedfile" event is not fired for images added this way:
myDropzone.on("addedfile", function(file) {
console.log("file added!"); // this line is never printed
});
But if added an image by manually clicking on dropzone and selecting a file, the above event would fire. Why is this event not fired in the first case?
4 Answers
According to dropzone documentation:
The proper way to trigger addedfile event is to call it in the init section when you instantiate dropzone.
Example:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
Don't do what I did and try to listen for the addedFile event instead of addedfile (d'oh).
i had same issue and found the answer here from @enyo:
Basically the addedfile.call is a bit clumsy and you need replace this line by the following:
myDropzone.emit("addedfile", file);
This way the "addedfile" function is called properly.
Cheers
Must call myDropzone.options.addedfile.call(myDropzone, mockFile); after declared "addedfile" callback.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
