πŸ“žEvents

Dropzone triggers events when processing files, to which you can register easily, by calling .on(eventName, callbackFunction) on your Dropzone instance:

let myDropzone = Dropzone("#my-element", { /* options */ });
myDropzone.on("addedfile", file => {
  console.log("A file has been added");
});

If you're configuring your Dropzone declaratively, then you don't have access to the instance to add events. In these case, you can use the init config, which is a function that is invoked when the Dropzone is initialized:

Dropzone.options.myElement = {
  // Note: using "function()" here to bind `this` to
  // the Dropzone instance.
  init: function() {
    this.on("addedfile", file => {
      console.log("A file has been added");
    });
  }
};

Both ways are perfectly fine, but you need to use the init() function if you setup your Dropzone declaratively.

List of all events

We will be listing all possible events here soon, but until we do that, you can find all of them, well documented in the source code. These are the implementations for the default event handles so you can see which arguments they receive. You can ignore the content of them if you aren't interested, or override the default behaviour (explained in the next section).

Overriding default event handlers

You can also override default event handlers. This should be approached with absolute caution since it can break if you upgrade the library and can also remove default functionality that you might not want to lose:

let myDropzone = Dropzone("#my-element", {
  addedfile: file => {
    // ONLY DO THIS IF YOU KNOW WHAT YOU'RE DOING!
  }
});

The difference here, is that the default event handler addedfile has been changed, instead of adding a new event handler with myDropzone.on("addedfile", () => {})

You should only do this when you really know how Dropzone works, and when you want to completely theme your Dropzone.

Last updated

Was this helpful?