Exports

The FilePond object is the object available after importing FilePond in your project. It exports the FilePond public API which we'll mostly use to create, find or destroy FilePond instances on the page.

Methods

Method	Description
`create(element, options)`	Creates a new FilePond instance, both parameters are optional.
`destroy(element)`	Destroys the FilePond instance attached to the supplied element
`find(element)`	Returns the FilePond instance attached to the supplied element
`parse(context)`	Parses a given section of the DOM tree for elements with class `.filepond` and turns them into `FilePond` elements.
`registerPlugin(plugin)`	Registers a FilePond plugin for later use
`setOptions(options)`	Sets page level default options for all FilePond instances
`getOptions()`	Returns the current default options
`supported()`	Returns `true` or `false` based on if the browser supports FilePond

Enums

Property	Description
`Status`	An enum to use together with the FilePond `status` property to determine the current filepond instance status.
`FileOrigin`	An enum to use together with the File `origin` property to determine the file origin.
`FileStatus`	An enum to use together with the File `status` property to determine the current file status.
`OptionTypes`	Returns an object describing all the available options and their types, useful for writing FilePond adapters

create

Enhancing an HTML element

The create method can be used to turn an element into a FilePond element. Pass an element reference as the first argument and presto!

We can still pass options to our instance by using data attributes.

FilePond will automatically clone attribute values and map them to its properties. This is very useful when progressively enhancing an existing <input type="file"> element.

In the example below the attributes name, data-max-files and required will automatically be passed to the created FilePond instance and converted from a string to the right property unit type.

<input type="file" name="filepond" data-max-files="10" required />

<script>
    // get a reference to the input element
    const inputElement = document.querySelector('input[type="file"]');

    // create a FilePond instance at the input element location
    const pond = FilePond.create(inputElement);

    // attributes have been set to pond options
    console.log(pond.name); // 'filepond'
    console.log(pond.maxFiles); // 10
    console.log(pond.required); // true
</script>

Attribute to option mapping is done by removing the data- part, removing dashes and uppercasing each character after a dash. This process turns data-max-files into maxFiles.

It's also possible to pass an additional option object to the create method.

<input type="file" name="filepond" required multiple />

<script>
    // get a reference to the input element
    const inputElement = document.querySelector('input[type="file"]');

    // create a FilePond instance at the input element location
    const pond = FilePond.create(inputElement, {
        maxFiles: 10,
        allowBrowse: false,
    });

    // attributes and initial options have been set to pond options
    console.log(pond.name); // 'filepond'
    console.log(pond.maxFiles); // 10
    console.log(pond.required); // true
    console.log(pond.allowMultiple); // true
</script>

Using an option object

We can also create a FilePond instance out of thin air and then add it to the page later on.

// create a FilePond instance at the input element location
const pond = FilePond.create({
    name: 'filepond',
    maxFiles: 10,
    allowBrowse: false,
});

// add our pond to the body
pond.appendTo(document.body);

destroy

Destroying a FilePond instance will reset the HTML to its original state.

<intput type="file" name="filepond" required multiple>
    <script>
        const inputElement = document.querySelector('input[type="file"]');

        // create the FilePond instance
        FilePond.create(inputElement);

        // destroy the FilePond instance by element reference
        FilePond.destroy(inputElement);
    </script></intput
>

parse

The parse method lets us automatically load FilePond elements on the page.

The code below will instruct FilePond to look for elements with the class .filepond in the subtree of the <body> element.

<input type="file" class="filepond" />

<script>
    FilePond.parse(document.body);
</script>

setOptions

We can set default options for all our FilePond instances on the page using the setOptions method.

FilePond.setOptions({
    allowDrop: false,
    allowReplace: false,
    instantUpload: false,
    server: {
        url: 'http://192.168.33.10',
        process: './process.php',
        revert: './revert.php',
        restore: './restore.php?id=',
        fetch: './fetch.php?data=',
    },
});

registerPlugin

We can register plugins with FilePond using the registerPlugin method.

<script src="./filepond.js"></script>
<script src="./filepond-plugin-image-preview.js"></script>
<script>
    FilePond.registerPlugin(FilePondPluginImagePreview);

    FilePond.create(/* options here */);
</script>

We can pass multiple plugins.

FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateSize);

Plugins need to be registered before we create our first FilePond instance.

Status

These are the properties available on the Status enum.

{
    EMPTY: 0,
    IDLE: 1,
    ERROR: 2,
    BUSY: 3,
    READY: 4
}

FileStatus

These are the properties available on the FileStatus enum. We can use it to get the actual status from the file item status property.

{
    INIT: 1,
    IDLE: 2,
    PROCESSING_QUEUED: 9,
    PROCESSING: 3,
    PROCESSING_COMPLETE: 5,
    PROCESSING_ERROR: 6,
    PROCESSING_REVERT_ERROR: 10,
    LOADING: 7,
    LOAD_ERROR: 8
}

FileOrigin

This enum contains the names for the different file origins.

A file item is either:

INPUT by the user
Restored from the server as a temporary file LIMBO
Is a LOCAL server file, a file already uploaded and confirmed that is not in the server temporary uploads folder.

{
    INPUT: 1,
    LIMBO: 2,
    LOCAL: 3
};