Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript , Recommended | October 21, 2018
Author: pqina
Views Total: 1,260
Official Page: Go to website
Last Update: October 21, 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],
  onpreparefile: [null, Type.FUNCTION],
  onupdatefiles: [null, Type.FUNCTION],
  beforeRemoveFile: [null, Type.FUNCTION],


v3.1.5 (10/21/2018)

  • Fix problem with workers on IE / Edge

v3.1.4 (10/19/2018)

  • Fix syntax error
  • Fix additional problem with quick file removals.
  • Fix problem where remove call would throw error depending on the state of the upload.
  • Fix problem where clicking on abort before upload had started would not cancel upload.

v3.1.1 (10/12/2018)

  • improvements to how FilePond renders the panel at various heights

v3.1.0 (10/10/2018)

  • Improve diffing when updating the files property.
  • Add onupdatefiles callback that is triggered when a file is added or removed to a pond instance.

v3.0.3 (10/09/2018)

  • fixed for IE 11

v3.0.2 (10/02/2018)

  • fix label not being clickable in integrated layout mode

v3.0.1 (10/02/2018)

  • fix problem with request timeout trigger way too soon

v3.0.0 (10/02/2018)

  • multiple tiny fixes and some streamlining of code to facilitate image edit plugin

v2.3.0 (09/24/2018)

  • add beforeRemoveFile hook
  • Improve browser environment detection

v2.2.1 (09/14/2018)

  • Fix another problem where list overflow would not render correctly.

v2.2.0 (09/05/2018)

  • Fix problem where maxFiles was not enforced when dropping a set of files, each file was added in sequence till maxFiles was reached while the set as a whole should’ve been invalidated at once.

v2.1.3 (09/04/2018)

  • Fix problem where max-height of filepond root would not be respected by file list.
  • Cleaned up some stray babelHelpers.
  • Fix bug in render engine style method, should result in less unnecessary redraws.

v2.1.1 (08/27/2018)

  • Fix problem where the drop indicator would render at the wrong location.
  • Fix problem where calling removeFile directly after processFile was resolved would throw an error.

v2.1.0 (08/18/2018)

  • Labels can now be set as functions, these functions will receive context information, this is useful to customize both he load error and processing error labels based on server response.

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