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