← All libraries

FilePond

JavaScript
↗ Official site

Images & file upload

Beautiful, feature-rich file upload component.

What it does

FilePond is a drag-and-drop file upload component with progress indicators, image preview, cropping, and server upload built in. It makes file uploads feel polished without a lot of custom code.

When to use it

Use this when you need a polished file upload experience with drag-and-drop and image preview.

Real example

You're building a profile photo upload flow and want drag-and-drop with a live preview and a crop step. Prompt: 'Initialize FilePond on the #avatar-input element. Add the FilePond Image Preview plugin and Image Crop plugin. Set allowImageCrop: true and imageCropAspectRatio: "1:1". On processfile, send the cropped result to POST /api/avatar.'

Good to know

Has plugins for image preview, crop, EXIF orientation correction. Works with React, Vue, or vanilla JS.

Alternatives

Uppy Dropzone.js

Install

$ npm install filepond

Use cases

file uploaddrag and dropimage uploadimage crop

Language

JavaScript

Category

Images & file upload

More in Images & file upload

Other tools in the same category

JS html2canvas

Take screenshots of any part of your webpage.

screenshotimage exportshare card
JS browser-image-compression

Compress images in the browser before uploading.

image compressionfile uploadclient-side
Python Pillow

Python library for image processing — resize, crop, filter, convert.

image processingimage resizeimage conversion