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.

npm

FilePond adapters are available for React, Vue, Angular, Svelte, and jQuery

Buy me a Coffee / Use FilePond with Pintura / Dev updates on Twitter

Core Features

Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
Drop files, select on filesystem, copy and paste files, or add files using the API.
Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Learn more about FilePond

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

FilePond Plugins

Adapters

React
Vue
Svelte
jQuery
Angular
Angular 1 (johnnyasantoss/angularjs-filepond)
Ember (alexdiliberto/ember-filepond)

Backend

Quick Start

Install using npm:

npm install filepond

Then import in your project:

import * as FilePond from 'filepond';

// Create a multi file upload component
const pond = FilePond.create({
    multiple: true,
    name: 'filepond'
});

// Add it to the DOM
document.body.appendChild(pond.element);

Or get it from a CDN:

<!DOCTYPE html>
<html>
<head>
  <title>FilePond from CDN</title>

  <!-- Filepond stylesheet -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

</head>
<body>

  <!-- We'll transform this input into a pond -->
  <input type="file" class="filepond">

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

  <!-- Turn all file input elements into ponds -->
  <script>
  FilePond.parse(document.body);
  </script>

</body>
</html>

Getting started with FilePond

Internationalization

The locale folder contains different language files, PR's are welcome, you can use locale files like this:

import pt_BR from 'filepond/locale/pt-br.js';

FilePond.setOptions(pt_BR);

Contributing

At the moment test coverage is not great, it's around 65%. To accept pull requests the tests need to be better, any help to improve them is very much appreciated.

Tests are based on Jest and can be run with npm run test

To build the library run npm run build

Publications

Browser Compatibility

FilePond is compatible with a wide range of desktop and mobile browsers, the oldest explicitly supported browser is IE11, for best cross browser support add FilePond Polyfill and Babel polyfill to your project.

FilePond uses BrowserStack for compatibility testing.

License

Please don't remove or change the disclaimers in the source files

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Uppy	26,954	55	119	2 days ago	87	August 30, 2022	161	mit	JavaScript
The next open source file uploader for web browsers :dog:
Filepond	13,738	173	111	20 days ago	199	May 31, 2022	89	mit	JavaScript
🌊 A flexible and fun JavaScript file upload library
Elfinder	4,433	494	76	3 days ago	69	March 14, 2022	80	other	JavaScript
📁 Open-source file manager for web, written in JavaScript using jQuery and jQuery UI
Tinyfilemanager	3,828			7 days ago			139	gpl-3.0	PHP
Single-file PHP file manager, browser and manage your files efficiently and easily with tinyfilemanager
Angular File Upload	3,457	279	25	a day ago	25	August 20, 2020	247	mit	JavaScript
[ALMOST NOT MAINTAINED] Angular File Upload is a module for the AngularJS framework
Shrine	3,072	255	45	3 days ago	53	June 14, 2021	9	mit	Ruby
File Attachment toolkit for Ruby applications
Vue Image Crop Upload	1,980	103	52	8 months ago	49	April 09, 2021	119		JavaScript
A beautiful vue component for image cropping and uploading. （vue图片剪裁上传组件）
Ng2 File Upload	1,890	1,311	410	2 months ago	21	September 07, 2021	424	mit	TypeScript
Easy to use Angular components for files upload
Express Fileupload	1,408	3,056	451	4 months ago	45	May 24, 2022	38	mit	JavaScript
Simple express file upload middleware that wraps around busboy
Tus Php	1,321	22	16	3 months ago	22	November 18, 2021	17	mit	PHP
🚀 A pure PHP server and client for the tus resumable upload protocol v1.0.0