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

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

import { createSignal } from 'solid-js';

// Component imports
import './App.css';

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

// Optionally import Solid <file-pond> component types
import 'filepond/types/solid';

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

function App() {
    const [entries, setEntries] = createSignal<FilePondEntrySource[]>([
        new File(['hello'], 'world.txt', {
            type: 'text/plain',
        }),
    ]);

    function handleSubmit(e: SubmitEvent) {
        e.preventDefault();
        console.log('submit', e);
    }

    return (
        <>
            <form method="post" onSubmit={handleSubmit}>
                <label for="my-files">Documents</label>

                <file-pond
                    onentrieschange={({ detail }) => {
                        setEntries(detail);
                    }}
                    entries={entries()}
                >
                    <input id="my-files" name="my-files" type="file" required multiple />
                </file-pond>

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

export default App;