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

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" 
    class="filepond"
    name="filepond" 
    multiple 
    data-max-file-size="3MB"
    data-max-files="3">
// 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
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageExifOrientation,
  FilePondPluginFileValidateSize
);

// Select the file input and use 
// create() to turn it into a pond
FilePond.create(
    document.querySelector('input')
);

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" 
    class="filepond"
    name="filepond"
    accept="image/png, image/jpeg, image/gif"/>
// We register the plugins required to do 
// image previews, cropping, resizing, etc.
FilePond.registerPlugin(
  FilePondPluginFileEncode,
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageResize,
  FilePondPluginImageTransform
);

// Select the file input and use 
// create() to turn it into a pond
FilePond.create(
  document.querySelector('input'),
  {
    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.

Roadmap

Core

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

Adapters

  • Web Component
  • Angular
  • Vue
  • jQuery
  • React

Plugins

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

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