Dropzone "addedfile" is not fired when adding images programatically

Question

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 = "http://example.com/image.jpg"
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?

I don't see anything wrong here. Perhaps the error is within some of the adjacent code? Not sure about Dropzone, but I know typical drag'n'drop functionality requires a lot of `e.preventDefault` and `e.stopPropagation` for event listeners to work properly. — Ross Brasseaux, Feb 16 '15 at 15:52

score 5 · Answer 1 · answered Nov 03 '17 at 01:15

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."); });
      }
   };

score 5 · Answer 2 · answered Apr 04 '20 at 07:21

5

Don't do what I did and try to listen for the addedFile event instead of addedfile (d'oh).

answered Apr 04 '20 at 07:21

gregdev

1,665
3
22
28

1

Exactly the issue I was having. A proof that no answer is stupid ;). This made me check the name. – Mario Lopez Apr 10 '20 at 06:32
LOL! Thanks! You saved me!! – Sisir Jul 08 '20 at 12:51
gregdev to the rescue! Same here. – Geat Jan 21 '21 at 18:12

score 3 · Accepted Answer · answered Mar 16 '15 at 18:25

i had same issue and found the answer here from @enyo: https://github.com/enyo/dropzone/issues/209

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

score 0 · Answer 4 · answered Apr 16 '18 at 11:02

0

Must call myDropzone.options.addedfile.call(myDropzone, mockFile); after declared "addedfile" callback.

answered Apr 16 '18 at 11:02

JKLIR

948
8
11

Dropzone "addedfile" is not fired when adding images programatically

4 Answers4