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.

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

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';

// Register the `<file-pond>` custom element
defineFilePond({
    // Set the locale of our FilePond element, we can
    // also set it directly on the element later
    locale,
});

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

// The field needs a `name` so it can be submitted
element.name = 'my-files';

// We make it a required field
element.required = true;

// Let's add a `<label>`
const label = document.createElement('label');
label.innerHTML = 'Drop files here, or <u>browse</u>';
element.append(label);

// Append the `<file-pond>` element it to a form
document.forms[0].append(element);

If the <label> doesn’t have a for attribute FilePond will automatically assign one and link it to its inner file input element.

We can use the inputId property to set the id of the inner input element but usually there’s no need for this.