createFilePondExtensionSet

The createFilePondExtensionSet function creates an array of default extensions and automatically inserts extensions passed to it in the correct locations. The default 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 the extensions property when calling defineFilePond they’re automatically passed to createFilePondExtensionSet and added to the default extension list.

By default extensions will be inserted after extensions of the same type. 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
// - EntryListView
// - ValueCallbackStore
// - FormPostStore <-

Transform extensions will automatically be inserted after validator extensions.

Resource extensions will automatically be inserted before view extensions.

Should we want to apply a transform before validating a file we can choose where to insert the extension by using an object instead of an array to define the extension in the list.

const extensions = createFilePondExtensionSet([
    [
        MediaResolutionValidator,
        {
            maxWidth: 500,
        },
    ],
    {
        insert: ImageBitmapTransform,
        options: {
            width: 500,
        },
        before: 'MediaResolutionValidator',
        // also supports `after`
    },
]);

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