FilePond Pintura Image Editor

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

Learn more about Pintura

Setting up FilePond with jQuery

The FilePond jQuery adapter transforms the standard FilePond API into a jQuery plugin API.

Installation instructions for npm.

npm install jquery-filepond --save

Get it from a CDN. Make sure to include jQuery and FilePond core first.

<script src=""></script>

<script src=""></script>

<script src=""></script>

Or download it from the GitHub repository and add it to the page manually.

<script src="jquery.js"></script>
<script src="filepond.min.js"></script>
<script src="filepond.jquery.js"></script>

Now we can use FilePond as a jQuery plugin.

Select elements with the familiar $() function and use .filepond() to run functions and change FilePond instance properties or methods.

// Turn input element into a pond

// Turn input element into a pond with configuration options
    allowMultiple: true,

// Set allowMultiple property to true
$('.my-pond').filepond('allowMultiple', false);

// Listen for addfile event
$('.my-pond').on('FilePond:addfile', function (e) {
    console.log('file added event', e);

// Manually add a file using the addfile method
    .filepond('addFile', 'index.html')
    .then(function (file) {
        console.log('file added', file);

Using the static FilePond API we can register plugins and change default settings.


    maxFileSize: '3MB',

Next steps

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