Svelte and SvelteKit have full support for web components so we can use the <file-pond> custom element as if it was a Svelte component.

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

<script lang="ts">
// FilePond imports
import { defineFilePond } from "filepond";
import { locale } from "filepond/locales/en-gb.js";

// Optionally import Svelte <file-pond> component types
import 'filepond/types/svelte';

// Define the <file-pond> element
defineFilePond({
    locale
});

// Holds reference to <file-pond> element
let pondRef;

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

    console.log(pond.currentEntries);
}
</script>
<form onsubmit={handleSubmit} method="POST">
  <label for="my-files">Documents</label>
  <file-pond bind:this={pondRef}>
    <input id="my-files" name="my-files" type="file" required multiple />
  </file-pond>

  <button type="submit">Submit</button>
</form>