A factory function that we can use to create custom file validators, expects a CreateSourceExtensionOptions object.

Our custom source extension needs to return a createSourceElement function.

Example

Let’s create a custom source extension that we can use to jot down our thoughts.

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

// Create our custom source extension
const ThoughtSource = createSourceExtension({
    name: 'ThoughtSource',
    props: {
        // the button label
        sourceLabel: 'Thought',

        // the button icon to use
        sourceIcon: '<circle cx="12" cy="12" r="9" fill="currentColor">',

        // intercept the file input value before it's assigned to entry src
        beforeInsertSource: ({ src }) => {
            // create the file name
            const name = src
                .trim()
                .substring(0, 20)
                .replace(/[^a-zA-Z0-9]/, '_');

            // create a text file of the thought
            return new File([src], `${name}.txt`, { type: 'text/plain' });
        },
    },
    factory: ({ props, didSetProps }) => {
        // this creates the input element that is shown
        function createSourceElement() {
            const textarea = document.createElement('textarea');
            textarea.placeholder = `I should buy a boat...`;
            return textarea;
        }

        // we return the input element factory and the source extension factory does the rest
        return {
            createSourceElement,
        };
    },
});

// Use the extension
defineFilePond({
    // Set default locale
    locale,

    // Add our custom MyMapStore extension
    extensions: [
        // Source for thoughts
        ThoughtSource,

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