← Back to archive

Repo of the Day

pqina/filepond

Published: Oct 27, 2021

Open repository ↗

Website: https://pqina.nl/filepond/

Summary

FilePond is a JavaScript file upload library that turns a standard <input type="file"> into a drop zone with previews, async uploads, and built-in image handling. It works as a plain script or through official adapters for React, Vue, Angular, Svelte, and jQuery, and is released under the MIT license.

What it is useful for

FilePond fits when you need an upload widget that does more than a plain file input. The README documents support for drag-and-drop, directory uploads, paste-from-clipboard, remote URLs, blobs, and Data URIs as input sources. On the network side, it does AJAX uploads with optional chunking and can submit files as base64 data inside a regular form post. For image workflows, the core library handles automatic resizing, cropping, filtering, and EXIF orientation, and a list of separate plugins adds image preview, size validation, PDF preview, zipping directory uploads, and other behaviors. It is also documented as accessible (tested with VoiceOver and JAWS, keyboard navigable) and responsive across mobile and desktop browsers.

How engineers can use it

The README's Quick Start covers two paths. With npm:

npm install filepond
import * as FilePond from 'filepond';

const pond = FilePond.create({ multiple: true, name: 'filepond' });
document.body.appendChild(pond.element);

Without a build step, you can load the stylesheet and script from a CDN and call FilePond.parse(document.body) to auto-attach to any <input> that has the filepond class. Translations are handled through the locale/ folder by importing a language module and passing it to FilePond.setOptions. For server uploads, validation, or image cropping, the README lists separate plugin packages and framework adapters that you install and register alongside the main library.

Two limitations the README flags: test coverage is around 65%, and IE11 is the oldest explicitly supported browser, which requires adding the FilePond polyfill plus a Babel polyfill. A v5 alpha branch is also available on the repository for early testing.