FilePond Pintura Image Editor

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura


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');

    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.