Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript , Recommended | February 19, 2019
Author: pqina
Views Total: 2,091
Official Page: Go to website
Last Update: February 19, 2019
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

  // Revert mode
  forceRevert: [false, Type.BOOLEAN], // Set to 'force' to require the file to be reverted before removal

  // Input requirements
  maxFiles: [null, Type.INT], // Max number of files
  checkValidity: [false, Type.BOOLEAN], // Enables custom validity messages

  // Where to put file
  itemInsertLocation: ['before', Type.STRING], // Default index in list to add items that have been dropped at the top of the list
  itemInsertInterval: [75, Type.INT],

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

  // Upload related
  instantUpload: [true, Type.BOOLEAN], // Should upload files immidiately on drop
  maxParallelUploads: [2, Type.INT], // Maximum files to upload in parallel

  // The server api end points to use for uploading (see docs)
  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>',
  labelInvalidField: ['Field contains invalid files', Type.STRING],
  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
  labelFileLoadError: ['Error during load', Type.STRING],
  labelFileRemoved: ['Removed', Type.STRING], // assistive only
  labelFileRemoveError: ['Error during remove', Type.STRING],
  labelFileProcessing: ['Uploading', Type.STRING],
  labelFileProcessingComplete: ['Upload complete', Type.STRING],
  labelFileProcessingAborted: ['Upload cancelled', Type.STRING],
  labelFileProcessingError: ['Error during upload', Type.STRING],
  labelFileProcessingRevertError: ['Error during revert', Type.STRING],

  labelTapToCancel: ['tap to cancel', Type.STRING],
  labelTapToRetry: ['tap to retry', Type.STRING],
  labelTapToUndo: ['tap to undo', 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
  styleItemPanelAspectRatio: [null, Type.STRING],
  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],


v4.12.0 (02/19/2019)

  • Add disabled property, can be set as an attribute on the file input or as a property in the FilePond options object.
  • Add catching clicks on the entire pond label element to make it easier to click the label.

v4.1.3 (02/15/2019)

  • Only hide preview images when resizing the window horizontally, fixes problem with resize events on iOS.
  • Improve the way that FilePond resumes drawing when a tab retains focus.

v4.1.2 (02/15/2019)

  • Improve the way that FilePond resumes drawing when a tab retains focus.

v4.1.1 (02/15/2019)

  • Fix problem where error shake animation would mess up preview image.

v4.1.0 (02/07/2019)

  • Add itemInsertLocationFreedom property, set to false to stop user from picking the location in the file list where the file is added.

v4.0.2 (02/05/2019)

  • Multiple improvements, small fixes and new features. As updating will result in animation speed changes, changes to the way files are added to the files list, and will require an update of the image preview plugin, the version has been bumped to 4.0.0

v3.9.0 (02/05/2019)

  • Add checkValidity which is set to false by default. If it’s set to true, FilePond will set the contents of the labelInvalidField property as the field custom validity message if it contains invalid files (files that for instance exceed max file size or fail other tests).

v3.8.2 (02/05/2019)

  • Fix problem with undefine ItemStatus object in processFiles method

v3.8.2 (01/31/2019)

  • Fix problem where remove server error message was passed directly to client without label. Set labelFileRemoveError to a string to change default error, set it to a function to show custom server error. { labelFileRemoveError: serverError => serverError }

v3.8.1 (01/31/2019)

  • Expose dispatch call to plugin item extensions.

v3.8.0 (01/30/2019)

  • add forceRevert option, clean up deprecated code paths

v3.7.7 (01/29/2019)

  • Improve onlistupdate event so it can be better synced with adapter components.

v3.7.6 (01/18/2019)

  • Switched browse text underline to text-decoration-skip-ink: auto instead of text-decoration-skip: ink to prevent eslint warnings.

v3.7.5 (01/14/2019)

  • Fix problem where calling processFiles without arguments would re-process already processed files.

v3.7.4 (01/04/2019)

  • Fix problem where subsequent calls to processFile would not automatically revert an uploaded file or abort an active upload.

v3.7.3 (01/02/2019)

  • Fix problem where upload complete indicator would not show when image preview was active.

v3.7.2 (01/01/2019)

  • Expose createItemAPI to plugins.

v3.7.1 (12/27/2018)

  • Fix problem where URLs would immidiately be in processed state.

v3.7.0 (12/22/2018)

  • Add maxParallelUploads option to limit the amount of files being uploaded in parallel.
  • Add option to only fetch file head when downloading remote URLs. File is downloaded to the server and server sends a unique file id to the client. Set server.fetch.method to ‘HEAD’ the server needs to repond with custom header X-Content-Transfer-Id and a unique id. See handle_fetch_remote_file in FilePond PHP Server for an example implementation.

v3.6.0 (12/19/2018)

  • add support for uploading transform plugin variants
  • add support for modifying formdata before it’s sent to the server

v3.5.1 (12/14/2018)

  • Fix problem where ‘processFile’ and ‘processFiles’ would reprocess already processed files.

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