Events

FilePond fires the following set of events. They're the same events as the available callback methods.

Events overview

Event	Description
`FilePond:init`	FilePond instance has been created and is ready.
`FilePond:warning`	FilePond instance throws a warning. For instance when the maximum amount of files has been reached. Optionally receives file if error is related to a file object.
`FilePond:error`	FilePond instance throws an error. Optionally receives file if error is related to a file object.
`FilePond:initfile`	Create file item
`FilePond:addfilestart`	Started file load
`FilePond:addfileprogress`	Made progress loading a file
`FilePond:addfile`	File has been loaded, if the detail object contains an error property, something went wrong
`FilePond:processfilestart`	Started processing a file
`FilePond:processfileprogress`	Made progress processing a file
`FilePond:processfileabort`	Aborted processing of a file
`FilePond:processfilerevert`	Processing of a file has been reverted
`FilePond:processfile`	Finished processing a file, if the detail object contains an error property, something went wrong
`FilePond:processfiles`	All files in the list have been processed
`FilePond:removefile`	File has been removed
`FilePond:preparefile`	File has been transformed by the transform plugin or another plugin subscribing to the prepare_output filter. It receives the file item and the output data.
`FilePond:updatefiles`	A file has been added or removed
`FilePond:activatefile`	Fired when a file is clicked or tapped
`FilePond:reorderfiles`	Fired when the files list has been reordered, receives current list of files (reordered) plus file origin and target index.

FilePond Loaded event

The FilePond script itself fires a FilePond:loaded event when it's ready. This is useful when we're directly embedding filepond on a page using a defer or async attribute on the <script> tag. In those situations the script will be loaded asynchronously so it might not be available when the document is ready.

The event detail property will contain the FilePond API.

document.addEventListener('FilePond:loaded', (e) => {
    console.log('FilePond ready for use', e.detail);

    // get create method reference
    const { create } = e.detail;
});

Plugin Loaded event

FilePond plugins will fire a FilePond:pluginloaded event on the document when ready for use. The event detail property will contain the plugin object.

document.addEventListener('FilePond:pluginloaded', (e) => {
    console.log('FilePond plugin is ready for use', e.detail);
});

Subscribing to events

The event detail property will contain the relevant event information. We can subscribe to events by listing on the FilePond .filepond--root node.

// get a reference to the root node
const pond = document.querySelector('.filepond--root');

// listen for events
pond.addEventListener('FilePond:addfile', (e) => {
    console.log('File added', e.detail);
});

FilePond also provides the on, onOnce and off methods as an alternative way to listen for events.

We can listen for the same events but can do so without adding the 'FilePond:' prefix. Parameters received by the hanlder functions are the same as defined on the callback methods.

const pond = FilePond.create();

// 'addfile' instead of 'FilePond:addfile'
pond.on('addfile', (error, file) => {
    if (error) {
        console.log('Oh no');
        return;
    }

    console.log('File added', file);
});

Events and JavaScript frameworks

When using one of the JavaScript framework components listening for events works exactly like you would expect for how components work in your framework of choice.

Please see your preferred framework configuration section for more details.