Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript , Recommended | August 13, 2018
Author: pqina
Views Total: 671
Official Page: Go to website
Last Update: August 13, 2018
License: MIT


Elegant File Input Enhancement Plugin With JavaScript – filepond


filepond is a JavaScript file upload plugin which helps you create elegant, flexible, customizable, drag-and-drop file input on the web page. Also features file preview, multi-file upload, server-side processing and much more. Licensed under GPL 3.0.

Basic usage:

Include the filepond’s stylesheet ‘filepond.css’ and JavaScript ‘filepond.js’ on the html page.

<link href="filepond.css" rel="stylesheet">
<script src="filepond.js"></script>

Create the file upload field on the webpage as these:

<div class="demo" id="demo">

  <div class="filepond-ripple filepond-ripple-one"></div>
  <div class="filepond-ripple filepond-ripple-two"></div>
  <div class="filepond-ripple filepond-ripple-three"></div>

  <div class="filepond-wrapper">

    <input type="file" 



Initialize the plugin and done.

var pond = FilePond.create( document.querySelector('input[type="file"]') );

Override the default options to customize the file uploader.

  // the id to add to the root element
  id: [null, Type.STRING],

  // input field name to use
  name: ['filepond', Type.STRING],

  // classname to put on wrapper
  className: [null, Type.STRING],

  // is the field required
  required: [false, Type.BOOLEAN],

  // Allow media capture when value is set
  captureMethod: [null, Type.STRING],
  // - "camera", "microphone" or "camcorder",
  // - Does not work with multiple on apple devices
  // - If set, acceptedFileTypes must be made to match with media wildcard "image/*", "audio/*" or "video/*"

  // Feature toggles
  allowDrop: [true, Type.BOOLEAN], // Allow dropping of files
  allowBrowse: [true, Type.BOOLEAN], // Allow browsing the file system
  allowPaste: [true, Type.BOOLEAN], // Allow pasting files
  allowMultiple: [false, Type.BOOLEAN], // Allow multiple files (disabled by default, as multiple attribute is also required on input to allow multiple)
  allowReplace: [true, Type.BOOLEAN], // Allow dropping a file on other file to replace it (only works when multiple is set to false)
  allowRevert: [true, Type.BOOLEAN], // Allows user to revert file upload
  // TODO: allowDrag: [true, Type.BOOLEAN],         // Allow dragging files
  // TODO: allowSwipe: [true, Type.BOOLEAN],          // Allow swipe to remove files
  // TODO: allowRemoveAll: [true, Type.BOOLEAN],        // Allow removing all items at once
  // TODO: allowUploadAll: [true, Type.BOOLEAN],        // Allow uploading all items at once

  // Input requirements
  maxFiles: [null, Type.INT], // Max number of files

  // Drag 'n Drop related
  dropOnPage: [false, Type.BOOLEAN], // Allow dropping of files anywhere on page (prevents browser from opening file if dropped outside of Up)
  dropOnElement: [true, Type.BOOLEAN], // Drop needs to happen on element (set to false to also load drops outside of Up)
  dropValidation: [false, Type.BOOLEAN], // Enable or disable validating files on drop
  ignoredFiles: [['.ds_store', 'thumbs.db', 'desktop.ini'], Type.ARRAY],
  // catchDirectories: [true, Type.BOOLEAN],          // Allow dropping directories in modern browsers

  // Upload related
  instantUpload: [true, Type.BOOLEAN], // Should upload files immidiately on drop
  // TODO: parallel: [1, Type.INT],             // Maximum files to upload in parallel
  // TODO: chunks: [false, Type.BOOLEAN],           // Use chunk uploading
  // TODO: chunkSize: [.5 * (1024 * 1024), Type.INT],     // Upload in 512KB chunks

  // by default no async api is supplied
  /* expected format
  url: '',
  timeout: 1000,
  process: {
  url: '',
  method: 'POST',
          withCredentials: false,
  headers: {},
          onload: (response) => {
              return response.id
  revert: {
  url: '',
  method: 'DELETE',
  withCredentials: false,
  headers: {},
          onload: null
  fetch: {
  url: '',
  method: 'GET',
  withCredentials: false,
  headers: {},
          onload: null
  restore: {
  url: '',
  method: 'GET',
  withCredentials: false,
  headers: {},
          onload: null
  server: [null, Type.SERVER_API],

  // Labels and status messages
  labelDecimalSeparator: [getDecimalSeparator(), Type.STRING], // Default is locale separator
  labelThousandsSeparator: [getThousandsSeparator(), Type.STRING], // Default is locale separator

  labelIdle: [
    'Drag & Drop your files or Browse',

  labelFileWaitingForSize: ['Waiting for size', Type.STRING],
  labelFileSizeNotAvailable: ['Size not available', Type.STRING],
  labelFileCountSingular: ['file in list', Type.STRING],
  labelFileCountPlural: ['files in list', Type.STRING],
  labelFileLoading: ['Loading', Type.STRING],
  labelFileAdded: ['Added', Type.STRING], // assistive only
  labelFileRemoved: ['Removed', Type.STRING], // assistive only
  labelFileLoadError: ['Error during load', Type.STRING],
  labelFileProcessing: ['Uploading', Type.STRING],
  labelFileProcessingComplete: ['Upload complete', Type.STRING],
  labelFileProcessingAborted: ['Upload cancelled', Type.STRING],
  labelFileProcessingError: ['Error during upload', Type.STRING],
  // labelFileProcessingPaused: ['Upload paused', Type.STRING],

  labelTapToCancel: ['tap to cancel', Type.STRING],
  labelTapToRetry: ['tap to retry', Type.STRING],
  labelTapToUndo: ['tap to undo', Type.STRING],
  // labelTapToPause: ['tap to pause', Type.STRING],
  // labelTapToResume: ['tap to resume', Type.STRING],

  labelButtonRemoveItem: ['Remove', Type.STRING],
  labelButtonAbortItemLoad: ['Abort', Type.STRING],
  labelButtonRetryItemLoad: ['Retry', Type.STRING],
  labelButtonAbortItemProcessing: ['Cancel', Type.STRING],
  labelButtonUndoItemProcessing: ['Undo', Type.STRING],
  labelButtonRetryItemProcessing: ['Retry', Type.STRING],
  labelButtonProcessItem: ['Upload', Type.STRING],

  // make sure width and height plus viewpox are even numbers so icons are nicely centered
  iconRemove: [
  iconProcess: [
  iconRetry: [
  iconUndo: [
  iconDone: [

  // custom initial files array
  files: [[], Type.ARRAY]

Callback functions.

  oninit: [null, Type.FUNCTION],
  onwarning: [null, Type.FUNCTION],
  onerror: [null, Type.FUNCTION],
  onaddfilestart: [null, Type.FUNCTION],
  onaddfileprogress: [null, Type.FUNCTION],
  onaddfile: [null, Type.FUNCTION],
  onprocessfilestart: [null, Type.FUNCTION],
  onprocessfileprogress: [null, Type.FUNCTION],
  onprocessfileabort: [null, Type.FUNCTION],
  onprocessfilerevert: [null, Type.FUNCTION],
  onprocessfile: [null, Type.FUNCTION],
  onremovefile: [null, Type.FUNCTION],


v2.0.1 (08/12/2018)

  • Add additional utilities to plugin API.

v2.0.0 (08/12/2018)

  • Automatically replace undo button counterclockwise arrow icon with remove button icon when instantUpload is set to true.

v1.8.8 (07/13/2018)

  • add metadata handling to add file method

v1.8.7 (07/13/2018)

  • fix problem where allowRevert:false would hide remove button

v1.8.6 (07/04/2018)

  • fix problem where adding dataURIs would throw error

v1.8.5 (06/29/2018)

  • Fix casting of input attributes without value to correct boolean

v1.8.4 (06/28/2018)

  • Fix problem where response timeout would throw an error
  • Improve handling of returned value by processing onload function

v1.8.3 (06/26/2018)

  • cleaning up stray code

v1.8.2 (06/26/2018)

  • fix problem where options were not overriden correctly

v1.8.1 (06/25/2018)

  • handle blob with name property as if it is a file

v1.8.0 (06/19/2018)

  • add option to mock server and temp files, add createView method to file-info view, add option to set initial metadata for temp and local files

v1.7.3 (06/19/2018)

  • make events async

v1.7.2 (06/14/2018)

  • add view filter to file-status node

v1.7.1 (05/31/2018)

  • fix problem where object configuration was not read correctly

v1.7.0 (05/29/2018)

  • add onerror callback for parsing custom server responses

v1.6.2 (05/29/2018)

  • fix problem where restored temp file would not be removed correctly

v1.6.1 (05/28/2018)

  • add FileOrigin enum object to FilePond object

v1.5.2 (05/23/2018)

  • remove max width on status

Leave a Reply