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 = ".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 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./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?

• javascript
• jquery
• dom-events
• dropzone.js

• 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 Commented Feb 16, 2015 at 15:52

4 Answers 4

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

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

i had same issue and found the answer here from @enyo: https://github./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

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