Programmatic setup

Create, configure, and destroy FilePond instances entirely from JavaScript, without declaring <file-pond> elements in markup. Useful for SPAs, conditional rendering, and framework-driven UIs.

Adding FilePond to a form

When we want to programmatically add FilePond to a webpage we can use the createElement API.

<form method="post" action="/">
    <button type="submit">Send</button>
</form>

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

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

    // Create our `<file-pond>` element
    const element = document.createElement('file-pond');

    // Append FilePond to the top of the form
    const [form] = document.forms;
    form.prepend(element);
</script>

Updating the label caption

To set a custom label programmatically we can update the slotted <label> element with a custom text or override the dropAreaLabel key of the locale.

Using an existing the file input

When adding FilePond to an existing form we can programmatically wrap it around the existing file input element.

FilePond will automatically connect the appended file input element to its internal logic and remove the automatically created file input it uses as a fallback.

<form method="post" action="/">
    <label for="docs">Documents</label>
    <input type="file" id="docs" name="docs" />

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

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

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

    // Create our `<file-pond>` element
    const element = document.createElement('file-pond');

    // Wrap our file input element
    const input = document.querySelector('input[type="file"]');

    // Insert our `<file-pond>` after the input so it's added to the correct location in the DOM
    input.after(pond);

    // Now move the input to the `<file-pond>` element
    pond.append(input);
</script>