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.

Try it out!

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

Multi-file upload

  • 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.
edit on codepen
The classic file input element we'll enhance
to a file pond, configured with attributes
<input type="file" 
// We want to preview images, so we register
// the Image Preview plugin, We also register 
// exif orientation (to correct mobile image
// orientation) and size validation, to prevent
// large files from being added

// Select the file input and use 
// create() to turn it into a pond

Profile picture selection

  • 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.
  • In this example the image is stored in base64 format so it can be sent with the form post.
edit on codepen
The classic file input element we'll enhance
to a file pond, we moved the configuration
properties to JavaScript
<input type="file" 
    accept="image/png, image/jpeg, image/gif"/>
// We register the plugins required to do 
// image previews, cropping, resizing, etc.

// Select the file input and use 
// create() to turn it into a pond
    labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
    imagePreviewHeight: 170,
    imageCropAspectRatio: '1:1',
    imageResizeTargetWidth: 200,
    imageResizeTargetHeight: 200

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...

  • 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
  • Crystal clear documentation
  • 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.



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


  • jQuery
  • React
  • Vue
  • Angular
  • Web Component


  • Image editor
  • Image masking
  • Rotate and flip image
  • Image effects
  • Image watermarks

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