Replace a file input with FilePond

This example replaces a normal file input with a FilePond drop area.

The storeAsFile property is only supported on Firefox, Chrome, Chromium powered browsers like Edge, and Safari version 14.1 and above. On older browser we'll have to upload our files asynchronously with the server property or by using the File Encode plugin.

import { create } from 'filepond';
import 'filepond/dist/filepond.css';

// Get a file input reference
const input = document.querySelector('input[type="file"]');

// Create a FilePond instance
create(input, {
    storeAsFile: true,
});

<html lang="en">
    <head>
        <title>FilePond demo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <form action="/" method="post" enctype="multipart/form-data">
            <input type="file" name="filepond" multiple />

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

        <script src="index.js" type="module"></script>
    </body>
</html>