Using FilePond to upload files with Alpine

Alpine has full support for web components so we can use the <file-pond> custom element with Alpine like it was any other HTML element.

<form x-data @submit.prevent="console.log($refs.pondRef.currentEntries)" method="POST">
    <label for="my-file">Documents</label>
    <file-pond x-ref="pondRef" @change="console.log($el.currentEntries)">
        <input id="my-file" type="file" name="files" required multiple />
    </file-pond>

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

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

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