Used to create a custom store extension.

We can define a default StoreExtensionOptions object and our custom extension needs to return a storeEntry function and can optionally return a restoreEntry and releaseEntry function.

The functions can call onprogress to update the entry progress state, onabort to abort the action, or use the abortController to handle abort signals arriving from FilePond.

Example

Let’s create a custom store that stores a file in a simple global Map.

import { defineFilePond, createStoreExtension } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ConsoleView } from 'filepond/extensions/console-view.js';

// this will be our file store
const store = new Map();

// add a file to our store so we can restore it
store.set('file_1', new File(['Hello World'], 'my-file.txt', { type: 'plain/text' }));

// create our custom store
const MyMapStore = createStoreExtension(
    'MyMapStore',
    {
        // default options
        storageIdPrefix: '',
    },
    ({ props, didSetProps }) => {
        // file index
        let index = 1000;

        async function storeEntry(entry, { onprogress, onabort, abortController }) {
            // Store the entry data somewhere, call onprogress() to update the entry state
            const { storageIdPrefix } = props;

            // create unique storage id
            const storageId = `${storageIdPrefix}${index++}`;
            store.set(storageId, entry.file);

            // When stored we return a unique storage id `value`
            return storageId;
        }

        async function restoreEntry(value, entry, { onprogress, onabort, abortController }) {
            // Used to restore a previously stored entry with storage id `value`
            resolve(store.get(value));
        }

        async function releaseEntry(value, entry, { onabort, abortController }) {
            // Used to remove a stored entry with storage id `value`
            store.delete(value);
        }

        return {
            restoreEntry,
            storeEntry,
            releaseEntry,
        };
    }
);

// Use the extension
const [element] = defineFilePond({
    // Set default locale
    locale,

    // Add our custom MyMapStore extension
    extensions: [
        [
            MyMapStore,
            {
                storageIdPrefix: 'file_',
            },
        ],

        // Add the ConsoleView extension for debugging purposes
        ConsoleView,
    ],
});

// Set initial file entries
element.entries = [
    {
        state: {
            // The file storage id
            value: 'file_1',

            // Instruct the store to instantly restore this file
            load: true,
        },
    },
];