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.

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.

Multiple File Code

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

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.
  • This example includes the image editor plugin to allow finetuning of the image crop.

Profile Picture Code

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(
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageResize,
  FilePondPluginImageTransform,
  FilePondPluginImageEdit
);

// 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,
    stylePanelLayout: 'compact circle',
    styleLoadIndicatorPosition: 'center bottom',
    styleProgressIndicatorPosition: 'right bottom',
    styleButtonRemoveItemPosition: 'left bottom',
    styleButtonProcessItemPosition: 'right bottom'
  }
);

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
  • Polymer
  • Angular
  • Vue
  • jQuery
  • React

Plugins

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

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