Using FilePond with Svelte

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

The example below is also suitable for use with SvelteKit.

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

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

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

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

    console.log(pond.entries);
}
</script>
<form onsubmit={handleSubmit} method="POST">
  <file-pond bind:this={pondRef}>
    <label for="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">Submit</button>
</form>