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.
21 KB gzipped. FilePond adapters are available for React, Vue, Angular and jQuery
FilePond is maintained by Rik Schennink
- 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 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 fixes EXIF orientation.
- Responsive, automatically scales to available space, is functional on both mobile and desktop devices.
FilePond is compatible with a wide range of desktop and mobile browsers, the oldest explicitely supported browser is IE11, for best cross browser support add FilePond Polyfill and a Promises polyfill to your project.
- File encode
- File rename
- File size validation
- File type validation
- File metadata
- File poster
- Image size validation
- Image preview
- Image crop
- Image resize
- Image transform
- Image EXIF orientation
Install using 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>