FilePond v5 is a complete rewrite of FilePond which means we can’t “just” npm update a project using FilePond v4 and be done with it. Depending on how you’re using FilePond there’s a lot of custom work involved.
In the overview below we’ll outline the most important FilePond v4 APIs and their FilePond v5 counterparts.
Initialisation
FilePond v5 is a custom element, meaning instead of passing a file input to the FilePond FilePond.create method we now wrap it with the FilePond custom element.
Alternatively we can set up FilePond a programmatically.
Stylesheet
Styles are part of the FilePond custom element and are added automatically, no need to reference external stylesheets.
FilePond can be styled with custom properties and by adjusting the template used to render the view.
Plugins
Plugins have been renamed to extensions and are now part of the main FilePond repository src/extensions instead of being placed in separate repositories.
Instead of calling registerPlugin, registering extensions can be done by passing them to defineFilePond. Each extension accepts configuration options which can be updated on the element.
Uploading files
In FilePond v4 we had to set the storeAsFile property to true to store files in the file input element, in v5 this is the default mode.
To upload files asynchronously we used to set the server property on FilePond v4, now we can add the FormPostStore extension, this store accepts a url parameter which would point to where the files are uploaded. This extension also manages the restore and revert action of a file.
To load a previously stored file we can add the URLLoader extension.
chunkUploads are now handled by the ChunkedUploadStore.
instantUpload is now managed by the shouldStore property.
Setting initial files
Files are now set via the entries property on the FilePondInputElement.
Updating the property will trigger an update of the state.
File items
Files are now called entries.
serverId
The serverId is now only set when using a store extension, it’s stored as value in the entry state property.
poster
Add the image view component to the template and use the poster property on the EntryListView of an item.
Labels
Labels can now be set with the locale property.
Icons
In v4 icons were properties on the FilePond object, these have been moved to the assets object.