createFilePondExtensionSet

The createFilePondExtensionSet function creates an array of default extensions. These extensions are used by the <file-pond> element and are loaded in the the following order.

1. FileInputSource is used to load files from the file input inside the file-pond custom element.
2. DataTransferLoader is used to load files inside datatransfers dropped on FilePond.
3. FileExtensionValidator is used to validate file extensions
4. FileMimeTypeValidator is used to validate file mime types
5. ValueCallbackStore is used to link up the FilePond element value property with the internal state.
6. EntryListView renders the file list view.

When we set additional extensions using defineFilePond they’re automatically passed to createFilePondExtensionSet and added to the default extension list.

Extensions will be inserted after extensions of the same time. CanvasLoader will be inserted after the default DataTransferLoader, FormPostStore will be inserted after the ValueCallbackStore.

const extensions = createFilePondExtensionSet([CanvasLoader, BlobLoader, FormPostStore]);

console.log(extensions);
// Logs:
// - FileInputSource
// - DataTransferLoader
// - CanvasLoader <-
// - BlobLoader <-
// - FileExtensionValidator
// - FileMimeTypeValidator
// - ValueCallbackStore
// - FormPostStore <-
// - EntryListView

A transform extension will be inserted after validator extensions and before store extensions.

Should we want to apply a transform before validating a file we can choose where to insert the extension by passing an additional configuration object { before: 'ExtensionName' }, or { after: 'ExtensionName' }.

const extensions = createFilePondExtensionSet([
    [
        MediaResolutionValidator,
        {
            maxWidth: 500,
        },
    ],
    [
        // Extension function
        ImageBitmapTransform,

        // Extension configuration
        {
            width: 500,
        },

        // Insertion instructions
        {
            before: 'MediaResolutionValidator',
        },
    ],
]);

console.log(extensions);
// Logs:
// - FileInputSource
// - DataTransferLoader
// - FileExtensionValidator
// - FileMimeTypeValidator
// - ImageBitmapTransform <-
// - MediaResolutionValidator <-
// - ValueCallbackStore
// - EntryListView