Using FilePond to upload files with React or Next

React and Next support web components so we can use the <file-pond> custom element as if it was a React component.

We can import the filepond/types/react module to type the custom element.

import { useState } from 'react';

// FilePond imports
import { defineFilePond, type FilePondEntrySource, type FilePondElement } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';

// Optionally import React <file-pond> component types
import 'filepond/types/react';

// Define <file-pond> element and sets English locale
defineFilePond({
    locale,
});

export default function App() {
    // two-way data binding
    const [entries, setEntries] = useState<FilePondEntrySource[]>([
        new File(['hello'], 'world.txt', {
            type: 'text/plain',
        }),
    ]);

    // handle form submit
    function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
        e.preventDefault();

        console.log('submit', e);
    }

    return (
        <form onSubmit={handleSubmit} method="POST">
            <label htmlFor="my-files">Documents</label>
            <file-pond
                onentrieschange={({ detail: currentEntries }) => {
                    setEntries(currentEntries);
                }}
                entries={entries}
            >
                <input id="my-files" name="my-files" type="file" required multiple />
            </file-pond>

            <button type="submit">Sumbit</button>
        </form>
    );
}