♥

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura

FilePond properties

The FilePond instance exposes a set of properties that enable us to update its state.

Core properties

The FilePond core module exposes the following properties.

null

0

'filepond'

null

false

false

null

A list of file locations that should be loaded Immediately

true

true

true

false

true

true

true

true

false

false

false

null

2

false

'before'

75

1000

{label,url}

Drag n' Drop

false

true

false

['.ds_store', 'thumbs.db', 'desktop.ini']

Server

null  

true  

false  

false  

5000000  

[500,1000,3000]

Labels

undefined  

undefined

'Drag & Drop your files or <span class="filepond--label-action"> Browse </span>'

'Field contains invalid files'  

'Waiting for size'  

'Size not available'  

'Loading'  

'Error during load'  

'Uploading'  

'Upload complete'  

'Upload cancelled'  

'Error during upload'  

'Error during revert'  

'Error during remove'  

'tap to cancel'  

'tap to retry'  

'tap to undo'  

'Remove'  

'Abort'  

'Retry'  

'Cancel'  

'Undo'  

'Retry'  

'Upload'  

SVG Icons

'<svg>...</svg>'

'<svg>...</svg>'

'<svg>...</svg>'

'<svg>...</svg>'

Callbacks

Hooks

Styles

null

null

'left'

'right'

'right'

'right'

null

Files

You can populate FilePond with a set of initial files using the files property. This property is suitable for restoring earlier temporary uploads or already uploaded files. While the files property can also be populated with new files, it is advised to add new files using only the addFile and addFiles methods.

The files property takes an array of file references, it accepts the same formats as the addFile method.

• Local and Remote URLs
• DataURLs
• Blobs or File objects

It extends this selection with the option to add server files.

Adding a temporary server file. The limbo type will direct the load request to the server API restore end point.

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to limbo to tell FilePond this is a temp file
            options: {
                type: 'limbo',
            },
        },
    ],
});

Adding an already uploaded server file. The local type will direct the load request to the server API load end point.

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',
            },
        },
    ],
});

You can also mock the file by supplying file information in the options object, this will be the same information that FilePond otherwise fetches from the server. FilePond will now create a mock file item, and won't load the file data.

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: 'my-file.png',
                    size: 3001025,
                    type: 'image/png',
                },
            },
        },
    ],
});

If you want to supply initial metadata to a loaded file (accessible using setMetadata and getMetadata on the file item) you can do so with the metadata property. The following example will create a date entry in the FilePond file item metadata object.

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // file initial metadata
                metadata: {
                    date: '2018-10-5T12:00',
                },
            },
        },
    ],
});

// get the data of the first file
const date = pond.getFile().getMetadata('date');

Fitting with the progressive enhancement strategy FilePond adheres to, it's also possible to feed FilePond an initial file using HTML.

The example below might seem elaborate at first, maybe it is a bit. But should JavaScript fail to load, for whatever reason, the user will still be able to remove files (by unchecking them) and add new files. The resulting form object when posted will contain all information required to update any server state.

<fieldset>
    <legend>Files</legend>

    <!-- a list of already uploaded files -->
    <ul>
        <li>
            <label>
                <input value="foo.jpg" data-type="local" checked type="checkbox" />
                foo.jpeg
            </label>
        </li>
        <li>
            <label>
                <input value="bar.png" data-type="local" checked type="checkbox" />
                bar.png
            </label>
        </li>
    </ul>

    <!-- our filepond input -->
    <input type="file" name="filepond" required multiple />
</fieldset>

<script>
    // get a reference to the fieldset element
    const fieldsetElement = document.querySelector('fieldset');

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

    // files have been gathered
    console.log(pond.files); // [{ source: 'foo.jpeg' }, { source: 'bar.png' }]
</script>

And this is how that HTML renders without styles. It's not super fancy, but it allows the user to upload or change his file selection, even without JavaScript.

<fieldset>
    <legend>Files</legend>

    <!-- a list of already uploaded files -->
    <ul>
        <li>
            <label>
                <input value="foo.jpg" data-type="local" checked type="checkbox" />
                foo.jpeg
            </label>
        </li>
        <li>
            <label>
                <input value="bar.png" data-type="local" checked type="checkbox" />
                bar.png
            </label>
        </li>
    </ul>

    <!-- our filepond input -->
    <input type="file" required multiple />
</fieldset>

Disabling Credits

FilePond is given to you for free. Please support the project by not removing the tiny Powered by PQINA footer.

If you don't like the way the footer looks but still want to support FilePond, please link to https://pqina.nl somewhere else on your website.

You can also restyle the footer by adjusting the .filepond--credits CSS class.

Your support helps keep the project alive.

Of course you can still disable the credits message by setting the credits property to false. If you do decide to remove the credits message and use FilePond in a commercial project please consider donating to keep the project alive.