Easy File Uploading With JavaScript | FilePond by PQINA

Upload anything, from anywhere

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.

Framework Adapters

The core library is written in vanilla JavaScript and therefore can be used everywhere.

Below you can find a list of adapters that make it easier to use FilePond with your favorite framework.

Receive a notification when a new adapter is released by subscribing to the newsletter

Example Implementations

Let's look at two quick example implementations and see what FilePond is capable of.

Multiple File Upload

Multi File Demo

  • Add the multiple attribute to a file input to create a multi-file drop area.
  • Limit the maximum amount of files with the data-max-files attribute.
  • Drop an image and FilePond will render a quick preview. It'll also correct mobile photo orientation info.
  • Files can be reordered, grab a file and drag it to a new location.
  • Image editing is powered by Pintura

Profile Picture Selection

Profile Picture Demo

  • Dropped images will automatically be cropped to a 1:1 aspect ratio and scaled to fit a 200 Ɨ 200 bounding box.
  • Should you accidentally drop an image on the browser window, FilePond will prevent the browser from opening it.
  • Image editing is powered by Pintura
FilePond ā™„ Pintura Image Editor

Pintura Image Editor integrates beautifully with FilePond and unlocks the perfect image editing experience for your users.

  • Five Minute Install
  • Set Crop Masks and Guides
  • Define Aspect Ratio Options
  • Rotate, Resize, and Flip Images
  • Annotate, Decorate, and Redact Images
  • Finetune Image Colors
  • Apply Filter Effects
Learn more about Pintura

Feature Overview

  • Multiple Input Formats

    Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.

  • Multiple File Sources

    Drop files, select files from the file system, add files using the API, or copy and paste files.

  • Async or Sync Uploading

    Send files to the server using XMLHttpRequest or store and submit with form post as base64 using the File Encode plugin.

  • Image Optimization

    Automatic resizing and cropping of images on the client saves server bandwidth and dramatically increases upload speed.

  • Accessible

    Tested with AT software like VoiceOver and JAWS. FilePond's user interface is navigable by Keyboard.

  • Responsive

    Automatically scales to available space. Is functional on both mobile and desktop devices.

That's not all...

  • Drag n' drop to reorder files
  • Modify labels and icons
  • Multiple or single file mode
  • Filter files from dropped folders
  • Restore temporary server files
  • Catch files dropped on page
  • Upload on drop or wait for user action
  • Limit drop area height
  • Drop to replace current file
  • Copy paste files
  • Add metadata to files
  • Extend FilePond with plugins
  • Limit the input file size
  • Limit the total size of all files
  • Limit the types of files that can be added
  • Show preview for image files
  • Crop images to a fixed ratio
  • Resize images to fit in a bounding box
  • Force resize images to a certain size
  • Apply image transformations on the client
  • Compress JPEG images
  • Convert images to JPEG or PNG
  • Read image EXIF orientation info
  • Base64 encode files

FilePond is constantly being improved

Inspect the roadmap below to find out what's coming soon.

Roadmap

Core

  • Grid view
  • Chunk uploading
  • Animated button icons
  • Different item layouts
  • CSS variables for colors

Adapters

  • Angular
  • Svelte
  • Vue
  • jQuery
  • React

Plugins

  • Image editor
  • Image rotation and flipping
  • Image watermarks
  • Image masking

Stay up to date on new roadmap releases by subscribing to the newsletter

About PQINA

Run by Rik Schennink PQINA helps over 10,000+ companies worldwide to be successful. PQINA is rated 4.9 out of 5 stars based on 500+ customer reviews

FilePond is my way of showing the web can rival the mobile app experience, it just needs that extra bit of attention.