A (21 KB gzipped) JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
Core Features
- Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
- Drop files, browse on filesystem, copy and paste files, or add files using the API.
- Async uploading with AJAX or 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, and correcting of EXIF orientation on the client saves bandwidth.
- Responsive, automatically scales to available space, is function on both mobile and desktop.
Plugins
- File encode
- File size validation
- File type validation
- Image preview
- Image crop
- Image resize
- Image transform
- Image EXIF orientation
Boilerplates
Quick Start
Install from NPM
npm install filepondThen 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>License
Commercial license
If you want to use FilePond on commercial sites, themes, projects, and applications, the Commercial license is what you need. With the commercial license, your source code is kept proprietary. View the license options on the pricing page.
Open source license
If you're working on an open source project under a license compatible with GPLv3, you may use FilePond under the terms of the GPLv3.
For more information you can read the full license here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent