Using FilePond with React

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

The example below is also suitable for use with Next.

import { useRef } from 'react';

// filepond imports
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';

// defines <file-pond> element
defineFilePond({
    locale,
});

export default function App() {
    // holds reference to <file-pond> element
    const pondRef = useRef(null);

    // handle form submit
    function handleSubmit(e) {
        e.preventDefault();

        console.log(pondRef.current?.entries);
    }

    return (
        <form onSubmit={handleSubmit} method="POST">
            <file-pond ref={pondRef}>
                <label htmlFor="my-files">
                    Drop files here, or <u>browse</u>
                </label>
                <input id="my-files" name="my-files" type="file" required multiple />
            </file-pond>

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