Repolode
Submit
pqina

pqina/filepond

A JavaScript file upload library with drag-and-drop, image optimization, chunked uploads and framework adapters for React, Vue, Angular and Svelte.

View on GitHubWebsite
Stars
16,394
Forks
851
Open issues
147
Last commit
10 days ago

What is it?

FilePond is a JavaScript library for handling file uploads in the browser. Users can drop files, pick them from the filesystem, paste them, or add them through the API, and the component accepts directories, blobs, remote URLs and Data URIs as input.

On the processing side, FilePond can resize, crop, filter and rotate images before upload, correct EXIF orientation, and send files via AJAX, in chunks, or encoded as base64 inside a form post. The UI is keyboard navigable, has been tested with screen readers such as VoiceOver and JAWS, and scales to both mobile and desktop layouts.

The core library is extended through a plugin system covering previews, validation, renaming, metadata and PDF handling. Official adapters exist for React, Vue, Angular, Svelte and jQuery, and community adapters cover several server-side frameworks.

Key features

  • 01Accepts files, directories, remote URLs and Data URIs via drag-and-drop, file picker, paste or API.
  • 02Supports chunked and AJAX uploads, with optional base64 encoding in form posts.
  • 03Resizes, crops, filters and fixes EXIF orientation for images before upload.
  • 04Keyboard navigable and tested with screen readers including VoiceOver and JAWS.
  • 05Extensible through plugins for previews, validation and metadata.

Use cases

  • Adding avatar or photo uploads to a web app with client-side resizing.
  • Building a multi-file upload form inside React, Vue, Angular or Svelte projects.
  • Uploading large files in chunks from a browser to a backend server.
  • Providing an accessible upload widget for users who rely on screen readers.

Quick start

  1. 1

    Install FilePond from npm

    npm install filepond
  2. 2

    Import FilePond and create a multi-file upload component

    import * as FilePond from 'filepond';
  3. 3

    Add the component to the DOM

Things to know

  • The Quick Start code is a sketch; you still need a backend endpoint to receive uploads.
  • Test coverage is around 65%, according to the README.
  • A v5 alpha is available for testing, so the main API may change.

In collections

Computer vision libraries & tools

Topics

#file-upload#javascript#drag-and-drop#image-processing#frontend-components#ui-library#filepond#plugin#vanilla

FAQ

What is filepond?
A JavaScript file upload library with drag-and-drop, image optimization, chunked uploads and framework adapters for React, Vue, Angular and Svelte. FilePond is a JavaScript library for handling file uploads in the browser. Users can drop files, pick them from the filesystem, paste them, or add them through the API, and the component accepts directories, blobs, remote URLs and Data URIs as input.
Is filepond free to use? What license does it have?
filepond is open source under the MIT license. Check the license terms before using it in commercial products.
Is filepond still maintained?
Actively maintained. The last commit to filepond was on Oct 28, 2026.
What can I use filepond for?
Adding avatar or photo uploads to a web app with client-side resizing. Building a multi-file upload form inside React, Vue, Angular or Svelte projects. Uploading large files in chunks from a browser to a backend server. Providing an accessible upload widget for users who rely on screen readers.
How do I install filepond?
Install FilePond from npm: npm install filepond Import FilePond and create a multi-file upload component: import * as FilePond from 'filepond'; Add the component to the DOM
Where can I get filepond?
The source code and installation instructions are on GitHub: https://github.com/pqina/filepond

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects