FilePond ♥ Pintura Image Editor

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

Learn more about Pintura

Using FilePond with JavaScript

Installing the files

FilePond is exposed as a UMD module. It can be added to a project using NPM, can be loaded from a CDN, or can be added manually.

Installing from NPM

Install npm and run the following command in your project root.

npm i filepond --save

We can then import it in our project.

import * as FilePond from 'filepond';

FilePond also requires a stylesheet.

When using a module bundler like Webpack we can add the styles like this.

import 'filepond/dist/filepond.min.css';

If we're not using a module bundler we can add the stylesheet to the <head> of the document like this.

<!DOCTYPE >
<html>
    <head>
        <link href="filepond.css" rel="stylesheet" />
    </head>
    <body>
        <!-- other html -->
    </body>
</html>

Loading from a CDN

The example below will load the latest version of FilePond from a CDN.

Please note that if the CDN is offline FilePond won't load.

It's advised to lock the FilePond version number so you don't receive any breaking changes. In the example below we've locked it to version 4.

<!DOCTYPE >
<html>
    <head>
        <!-- other html -->

        <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
    </head>
    <body>
        <!-- other html -->

        <script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
    </body>
</html>

Manually including the files

We can also download FilePond from GitHub and include the files manually.

<!DOCTYPE >
<html>
    <head>
        <!-- other html -->

        <link href="filepond.css" rel="stylesheet" />
    </head>
    <body>
        <!-- other html -->

        <script src="filepond.js"></script>
    </body>
</html>

Implementation example

We use the create method to turn a <input type="file"/> into a FilePond drop area.

The target file input element will automatically be replaced.

<link href="filepond.css" rel="stylesheet" />
<script src="filepond.js"></script>

<input type="file" />

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

    // Create a FilePond instance
    const pond = FilePond.create(inputElement);
</script>

Next steps

With FilePond set up, we can continue to configure FilePond to our liking by adjusting the available configuration options