jQuery FilePond

jQuery FilePond is a handy jQuery adapter for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

License: MIT npm version

Also need Image Editing?

Pintura the modern JavaScript Image Editor is what you're looking for. Pintura supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.

Learn more about Pintura


Install from npm

npm install jquery-filepond --save

Or form a CDN:

<input type="file" class="my-pond" name="filepond"/>

<!-- include jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<!-- include FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

<!-- include FilePond plugins -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<!-- include FilePond jQuery adapter -->
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>


    // First register any plugins

    // Turn input element into a pond

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

    // 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
    $('.my-pond').first().filepond('addFile', 'index.html').then(function(file){
      console.log('file added', file);


Read the docs for more information

JQuery Filepond

🔌 A handy FilePond wrapper for jQuery

JQuery Filepond Info

⭐ Stars 153
🔗 Homepage pqina.nl
🔗 Source Code github.com
🕒 Last Update 6 months ago
🕒 Created 4 years ago
🐞 Open Issues 2
➗ Star-Issue Ratio 77
😎 Author pqina