Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript , Recommended | December 3, 2018
Author: pqina
Views Total: 1,694
Official Page: Go to website
Last Update: December 3, 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 <span class="filepond--label-action">Browse</span>',

  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: [
    '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M11.586 13l-2.293 2.293a1 1 0 0 0 1.414 1.414L13 14.414l2.293 2.293a1 1 0 0 0 1.414-1.414L14.414 13l2.293-2.293a1 1 0 0 0-1.414-1.414L13 11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414L11.586 13z" fill="currentColor" fill-rule="nonzero"/></svg>',
  iconProcess: [
    '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M14 10.414v3.585a1 1 0 0 1-2 0v-3.585l-1.293 1.293a1 1 0 0 1-1.414-1.415l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.415L14 10.414zM9 18a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2H9z" fill="currentColor" fill-rule="evenodd"/></svg>',
  iconRetry: [
    '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M10.81 9.185l-.038.02A4.997 4.997 0 0 0 8 13.683a5 5 0 0 0 5 5 5 5 0 0 0 5-5 1 1 0 0 1 2 0A7 7 0 1 1 9.722 7.496l-.842-.21a.999.999 0 1 1 .484-1.94l3.23.806c.535.133.86.675.73 1.21l-.804 3.233a.997.997 0 0 1- 0 0 1-.73-1.21l.23-.928v-.002z" fill="currentColor" fill-rule="nonzero"/></svg>',
  iconUndo: [
    '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M9.185 10.81l.02-.038A4.997 4.997 0 0 1 13.683 8a5 5 0 0 1 5 5 5 5 0 0 1-5 5 1 1 0 0 0 0 2A7 7 0 1 0 7.496 9.722l-.21-.842a.999.999 0 1 0-1.94.484l.806 3.23c.133.535.675.86 1.21.73l3.233-.803a.997.997 0 0 0 .73-1.21.997.997 0 0 0-1.21-.73l-.928.23-.002-.001z" fill="currentColor" fill-rule="nonzero"/></svg>',
  iconDone: [
    '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M18.293 9.293a1 1 0 0 1 1.414 1.414l-7.002 7a1 1 0 0 1-1.414 0l-3.998-4a1 1 0 1 1 1.414-1.414L12 15.586l6.294-6.293z" fill="currentColor" fill-rule="nonzero"/></svg>',

  // styles
  stylePanelLayout: [null, Type.STRING], // null 'integrated', 'compact', 'circle'
  stylePanelAspectRatio: [null, Type.STRING], // null or '3:2' or 1
  styleButtonRemoveItemPosition: ['left', Type.STRING],
  styleButtonProcessItemPosition: ['right', Type.STRING],
  styleLoadIndicatorPosition: ['right', Type.STRING],
  styleProgressIndicatorPosition: ['right', Type.STRING],

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

event handlers and hooks.

  // event handlers
  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],

  // hooks
  beforeAddFile: [null, Type.FUNCTION],
  beforeRemoveFile: [null, Type.FUNCTION],


v3.5.0 (12/03/2018)

  • add beforeAddFile hook

v3.4.0 (12/02/2018)

  • Add server.remove property, this property can be optionally set to a method to call when the remove button is tapped on a local file. This allows removing files from the server. Please note that allowing clients to remove files from the server is a potential security risk and requires extra caution.
  • By default the property is null. The advise is to not use this method and only make changes to the server after the parent form has been submitted. The form POST will contain all the loaded file names and relevant file data, it should be enough to determine the files to remove and the files to keep.

v3.3.3 (11/30/2018)

  • Fix filename matching of content-disposition header when the filename is not wrapped in quotes.
  • Fix problem where special characters in filename prevented a file from being added

v3.3.2 (11/17/2018)

  • Fix problem where revert call would revert wrong file item

v3.3.1 (11/15/2018)

  • Fix problem where exceeding the max file limit would not throw an error

v3.3.0 (11/01/2018)

  • Add feature to silently update metadata so it doesn’t trigger an update.

v3.2.5 (10/26/2018)

  • Fix issue where items would be removed before item sub views were all in rest state.

v3.2.4 (10/25/2018)

  • Fix problem where server side rendering would not work correctly
  • Fix problem where beforeRemoveFile hook was not called when in instantUpload mode and reverting an upload.

v3.2.2 (10/24/2018)

  • Add preparations for queueing file processing.

v3.2.0 (10/23/2018)

  • dd global scoped property for painter so multiple libraries can subscribe to read and write DOM operations. This is mostly in preparation for a standalone version of the Image Editor plugin.

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

You Might Be Interested In:

Leave a Reply