A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

This is the v5 alpha/beta branch. Take me to the v4 branch

TODO:

• Docs are in development
• Naming of various types
• Run additional tests on mobile devices
• Add basic image manipulation extensions
• default styles for :valid, :invalid, and :focus

If you're trying out v5, please share your feedback on Discord

We can install the filepond package by running the following command in our terminal:

npm install filepond@alpha

We wrap an <input type="file"> with the <file-pond> custom element and then register the custom element using the defineFilePond function.

<form action="/upload" method="POST">
    <file-pond>
        <label for="my-file">Drop files here, or <u>browse</u></label>
        <input id="my-file" type="file" name="files" required />
    </file-pond>

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

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

    const elements = defineFilePond({
        locale,
    });
</script>

MIT