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 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.