Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript | December 1, 2017
Author: pqina
Views Total: 67
Official Page: Go to website
Last Update: December 1, 2017
License: MIT

Preview:

Elegant File Input Enhancement Plugin With JavaScript – filepond

Description:

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" 
        name="filepond" 
        multiple 
        data-max-total-files="10" 
        data-max-file-size="3MB"/>

  </div>

</div>

Initialize the plugin and done.

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

Override the default options to customize the file uploader.

FilePond.setOptions({
  name: "filepond"
  required: false,
  captureMethod: null,
  allowDrop: true,
  allowBrowse: true,
  allowPaste: true,
  allowMultiple: false,
  allowReplace: true,
  maxFiles: null,
  dropOnPage: false,
  dropOnElement: true,
  ignoredFiles: ".ds_store", "thumbs.db", "desktop.ini",
  instantUpload: true,
  server: null,
  serverFileReferenceFormat: "/^[0-9a-fA-F]{32}$/",
  labelDecimalSeparator: Me(),
  labelThousandsSeparator: Pe(),
  labelIdle: 'Drag & Drop your files or <span class="filepond--label-action">Browse</span>',
  labelFileWaitingForSize: "Waiting for size",
  labelFileSizeNotAvailable: "Size not available",
  labelFileCountSingular: "file in list",
  labelFileCountPlural: "files in list",
  labelFileLoading: "Loading",
  labelFileAdded: "Added",
  labelFileRemoved: "Removed",
  labelFileLoadError: "Error during load",
  labelFileProcessing: "Uploading",
  labelFileProcessingComplete: "Upload complete",
  labelFileProcessingAborted: "Upload cancelled",
  labelFileProcessingError: "Error during upload",
  labelTapToCancel: "tap to cancel",
  labelTapToRetry: "tap to retry",
  labelTapToUndo: "tap to undo",
  labelButtonRemoveItem: "Remove",
  labelButtonAbortItemLoad: "Abort",
  labelButtonRetryItemLoad: "Retry",
  labelButtonAbortItemProcessing: "Cancel",
  labelButtonUndoItemProcessing: "Undo",
  labelButtonRetryItemProcessing: "Retry",
  labelButtonProcessItem: "Upload",
  iconRemove: '<svg aria-hidden="true" width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M2.586 4L.293 6.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L4 5.414l2.293 2.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L5.414 4l2.293-2.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L4 2.586 1.707.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L2.586 4z" fill-rule="nonzero" fill="#FFF"/></svg>',
  iconProcess: '<svg aria-hidden="true" width="10" height="12" viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 3.414V7c0 .552-.448 1-1 1s-1-.448-1-1V3.414L2.707 4.707c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.024 0-1.414l3-3c.39-.39 1.024-.39 1.414 0l3 3c.39.39.39 1.024 0 1.414-.39.39-1.024.39-1.414 0L6 3.414zM1 11c-.552 0-1-.448-1-1s.448-1 1-1h8c.552 0 1 .448 1 1s-.448 1-1 1H1z" fill="#FFF" fill-rule="evenodd"/></svg>',
  iconRetry: '<svg aria-hidden="true" width="14" height="18" viewBox="0 0 14 18" xmlns="http://www.w3.org/2000/svg"><path d="M4.81 4.752l-.038.02C3.087 5.612 2 7.332 2 9.25c0 2.762 2.238 5 5 5s5-2.238 5-5c0-.552.448-1 1-1s1 .448 1 1c0 3.866-3.134 7-7 7s-7-3.134-7-7c0-2.622 1.455-4.984 3.722-6.187l-.842-.21c-.536-.133-.862-.676-.728-1.212.133-.535.676-.86 1.212-.727l3.23.805c.535.133.86.675.73 1.21L6.52 6.162c-.132.537-.675.864-1.21.73-.537-.132-.864-.675-.73-1.21l.23-.928z" fill-rule="nonzero" fill="#FFF"/></svg>',
  iconUndo: '<svg aria-hidden="true" width="11" height="8" viewBox="0 0 11 8" xmlns="http://www.w3.org/2000/svg"><path d="M1.78 3.59c-.383-.4-1.016-.414-1.415-.032-.4.382-.413 1.015-.03 1.414L2.808 7.56c.372.39.987.414 1.39.054l5.98-5.357c.41-.37.445-1 .077-1.412-.37-.412-1-.446-1.412-.078l-5.26 4.71L1.78 3.59z" fill-rule="nonzero" fill="#FFF"/></svg>',
  files: []
})

Callback functions.

FilePond.setOptions({
  oninit: null,
  onwarning: null,
  onerror: null,
  onaddfilestart: null,
  onaddfileprogress: null,
  onaddfile: null,
  onprocessfilestart: null,
  onprocessfileprogress: null,
  onprocessfileabort: null,
  onprocessfilerevert: null,
  onremovefile: null,
})

Leave a Reply