> For the complete documentation index, see [llms.txt](https://docs.dropzone.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dropzone.dev/configuration/events.md).

# Events

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

```javascript
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:

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

{% hint style="warning" %}
**Careful**: when providing the init function, make sure you use the `function()` syntax instead of the arrow syntax, because otherwise the keyword `this` will not reference the Dropzone instance. For more information read up on the [difference between the arrow function expression and the function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
{% endhint %}

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

{% hint style="success" %}
Dropzone itself relies heavily on events. Everything that’s visual is created by listening to them. They are a fundamental part of making Dropzone look and feel how you want it to.
{% endhint %}

### 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](https://github.com/dropzone/dropzone/blob/main/src/options.js#L574). 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

{% hint style="danger" %}
In general **you should never have to do this**, and you should be familiar with the code if you decide to do it.
{% endhint %}

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:

```javascript
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](/configuration/theming.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dropzone.dev/configuration/events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.