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;