Elegant File Input Enhancement Plugin With JavaScript – filepond

Category: Form , Javascript , Recommended | May 31, 2022
0 Comment
Demo Download
Author:pqina
Views Total:1,549 views
Official Page:Go to website
Last Update:May 31, 2022
License:MIT

Preview:

Elegant File Input Enhancement Plugin With JavaScript – filepond

Description:

filepond is a JavaScript file upload plugin that 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.

See Also:

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({
  // 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],
  // allows you to sort items via drag and drop
  allowReorder: false,
  // 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/*"
  // set to false to prevent FilePond from setting the file input field accept attribute to the value of the acceptedFileTypes
  allowSyncAcceptAttribute: true,
  // 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
  allowRemove: [true, Type.BOOLEAN], // Allow user to remove a file
  allowProcess: [true, Type.BOOLEAN], // Allows user to process a file, when set to false, this removes the file upload button
  allowReorder: [false, Type.BOOLEAN], // Allow reordering of files
  allowDirectoriesOnly: [false, Type.BOOLEAN], // Allow only selecting directories with browse (no support for filtering dnd at this point)
  // Try store file if `server` not set
  storeAsFile: [false, Type.BOOLEAN],
  // 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
  allowMinimumUploadDuration: [true, Type.BOOLEAN], // if true uploads take at least 750 ms, this ensures the user sees the upload progress giving trust the upload actually happened
  // The server api end points to use for uploading (see docs)
  server: [null, Type.SERVER_API],
  // File size calculations, can set to 1024, this is only used for display, properties use file size base 1000
  fileSizeBase: [1000, Type.INT],
  // 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>',
    Type.STRING
  ],
  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>',
    Type.STRING
  ],
  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>',
    Type.STRING
  ],
  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-1.21.73.997.997 0 0 1-.73-1.21l.23-.928v-.002z" fill="currentColor" fill-rule="nonzero"/></svg>',
    Type.STRING
  ],
  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>',
    Type.STRING
  ],
  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>',
    Type.STRING
  ],
  // 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],
  styleButtonRemoveItemAlign: [false, Type.BOOLEAN]
  // custom initial files array
  files: [[], Type.ARRAY]
})

Event handlers and hooks.

FilePond.setOptions({
  // event handlers
  oninit: [null, Type.FUNCTION],
  onwarning: [null, Type.FUNCTION],
  onerror: [null, Type.FUNCTION],
  onactivatefile: [null, Type.FUNCTION],
  oninitfile: [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],
  onprocessfiles: [null, Type.FUNCTION],
  onremovefile: [null, Type.FUNCTION],
  onpreparefile: [null, Type.FUNCTION],
  onupdatefiles: [null, Type.FUNCTION],
  onreorderfiles: [null, Type.FUNCTION],
  // hooks
  beforeAddFile: [null, Type.FUNCTION],
  beforeRemoveFile: [null, Type.FUNCTION],
})

Changelog:

v4.30.4 (05/31/2022)

  • Fix a bug where the selected file is not replaced
  • Fix a bug where the onwarning event is not triggered
  • Add more translations

v4.30.3 (09/30/2021)

  • Prioritize server prop before other props when passed to setOptions

v4.30.0 (09/30/2021)

  • add labels for file size

v4.29.1 (09/10/2021)

  • revert chunked uploads

v4.29.0 (08/16/2021)

  • Enable rejecting images with an error message using the internal DID_LOAD_ITEM hook.

v4.28.2 (06/08/2021)

  • Fix issue where local server files could not be re-uploaded after editing and did not trigger remove of source file.

v4.28.1 (06/08/2021)

  • Fix CSS error.

v4.28.0 (06/08/2021)

  • Add storeAsFile property, if set to true FilePond will attempt to store the file objects in file input elements allowing file submit along with parent form (no need for server property). This only works if the browser supports the DataTransfer constructor, this is the case on Firefox, Chrome, Chromium powered browsers and Safari version 14.1 and higher.
  • Switch to PostCSS for style output.

v4.27.3 (05/31/2021)

  • Fix issue with file.js component leaking state causing allowRemove to impact other instances of FilePond.

v4.27.2 (05/27/2021)

  • Fix issue with fetch and HEAD no setting server id to hidden input element.

v4.27.1 (04/30/2021)

  • Fix issue with allowMinimumUploadDuration set to false throwing error.

v4.27.0 (04/30/2021)

  • Add allowMinimumUploadDuration set to false to prevent a minimum upload time of 750ms.

v4.26.1 (03/30/2021)

  • Add metdata change info to internal SHOULD_PREPARE_OUTPUT call

v4.26.0 (03/20/2021)

  • Fix problem with rendering 0 items per row.
  • The headers property of the server.process end point can now be a function.

v4.25.3 (03/13/2021)

  • Fix issue with chunkRetryDelays

v4.25.2 (03/09/2021)

  • Fix issue with fixed with file items not row wrapping correctly
  • Fix file info label when remove button positioned to the right

v4.25.1 (12/11/2020)

  • Renamed beforePrepareOutput hook to beforePrepareFile

v4.24.0 (12/11/2020)

  • Tiny changes to make integration with new Doka Image Editor version a bit easier

v4.22.1 (10/31/2020)

  • fix problem with locale

v4.22.0 (10/29/2020)

  • Add internal filter for plugins to manipulate dropped files before adding them to the files list.

v4.21.1 (10/09/2020)

  • fix byte conversions

v4.21.0 (10/05/2020)

  • Add fileSizeBase option

v4.20.0 (08/31/2020)

  • Add allowRemove, set to false to disable remove button.
  • Improve TypeScript definitions.
  • Fix issue where removeFiles would not remove all files.

v4.19.1 (07/28/2020)

  • Fix issue where removal of a server file was requested when setting new files to the files property.

v4.19.0 (07/27/2020)

  • Add locale folder, can now import different locales.
  • Improve supports method, now correctly detects MacOS Safari 8.
  • Improve type definitions file.
  • Fix issue with removeFiles({ revert: false }) not working.
  • Fix issue where content pasted in a textarea or input would be interpreted as a file.

v4.18.0 (06/22/2020)

  • Add fallback for fetch when loading remote URLs, if no custom fetch supplied, will use default request.
  • Add TypeScript dynamic label types.
  • Fix issue where order of files wasn’t correct when setting initial files.

v4.17.1 (06/11/2020)

  • Fix issue where reorder event was fired on each drag interaction, now only fires when order changes.

v4.17.0 (06/11/2020)

  • Add allowProcess, set to false to remove processing button and related abort / retry processing controls.
  • Fix issue where hidden inputs didn’t reflect visual order of files in list.

v4.16.0 (06/09/2020)

  • Add allowSyncAcceptAttribute option, set to false to prevent FilePond from setting the file input field accept attribute to the value of the acceptedFileTypes.

v4.15.1 (06/05/2020)

  • Fix state.request.abort is not a function error

v4.15.0 (05/29/2020)

  • Add support for reordering items in a grid layout.

v4.14.0 (05/29/2020)

  • Add ‘oninitfile’, which will be called when file is first initialised, can be used to immediately set metadata.

v4.13.7 (05/22/2020)

  • Fix backwards compatibility problem with 4.13.5 and 4.13.6 where removeFile would revert upload.
  • Add { revert: true } as parameter to removeFile and removeFiles methods. Where in the previous two fix versions reverting was added to be done automatically this new parameter now needs be set to revert the upload.

v4.13.6 (05/12/2020)

  • Fix problem where revert wasn’t called for user added files.

v4.13.5 (04/30/2020)

  • Fix trigger of revert handler to removeFile API.
  • Fix problem where circular layout wouldn’t work on latest Safari.

v4.13.4 (04/15/2020)

  • Fix issue where FilePond internal event mechanism would be in slowmotion mode when running in an inactive tab because of `setTimeout` use.

v4.13.4 (04/14/2020)

  • Fix issue where FilePond would excessivly pause in between processing files while running in an inactive tab.

v4.13.2 (04/13/2020)

  • fix issue where background uploads took way too long

v4.13.1 (04/07/2020)

  • Fix issue where HEAD fetch request would try to turn response into zero byte file.

v4.13.0 (03/14/2020)

  • Fix issue where hidden file fields were not in the correct order when files were sorted either automatically or manually.
  • Clean up accidental log statement left in 4.12.2 release.

v4.12.2 (03/12/2020)

  • Fix issue with re-enabling FilePond field from disabled state not applying the appropriate fields to the browse input.
  • Fix issue where browse button wasn’t clickable when styleLayoutMode was set to compact.

v4.12.0 (03/03/2020)

  • Add styleButtonRemoveItemAlign to align remove button to the left side of the file item.
  • Fix issue where list of files could not be scrolled when FilePond was disabled.

v4.11.0 (02/11/2020)

  • Add relativePath property to file item.
  • Add onreorderfiles callback.
  • Fix issue where unkown type was “null” instead of an empty string.
  • Fix issue where onactivatefile was fired on drag end.

v4.10.0 (02/07/2020)

  • update input files with directory information

v4.9.5 (01/21/2020)

  • Fix issue with error format in typescript types

v4.9.4 (01/14/2020)

  • Fix problem with API querystring containing multiple quetionmarks.

v4.9.3 (12/27/2019)

  • Fix problem where ending the class attribute on a space would throw an error.

v4.9.2 (12/14/2019)

  • Add grab cursor to items so there’s and indicator that items are grabbable.
  • Fix issue where Chrome on Android would launch pull-to-refresh when trying to drag a file item.

v4.9.0 (12/13/2019)

  • Add drag to reorder file items, enable by setting allowReorder to true.
  • Add moveFile(query, index) method. Use to move a file to a different index in the file items array.

v4.8.2 (12/12/2019)

  • fix SSR bug introduced in 4.8.1

v4.8.1 (12/12/2019)

  • fix ie markup render bug

v4.8.0 (12/09/2019)

  • Add prepareFile and prepareFiles method. Use to request generating output files (when using image transform plugin).

v4.7.4 (11/02/2019)

  • add utf-8 encoding for request header values

v4.7.3 (10/28/2019)

  • Switch from setAttribute to cssText for layout changes resulting in better performance and CSP compatibility.

v4.7.2 (09/27/2019)

  • Fix issue where iOS 10 would throw an error when calling delete on a dataset property
  • Fix issue with onwarning being called on incorrect element

v4.7.1 (09/12/2019)

  • Fix problem where directories with over 100 files weren’t read correctly.

v4.7.0 (09/11/2019)

  • Add support for chunked uploads.

v4.6.1 (09/04/2019)

  • Add missing Blob type to TypeScript server config

v4.6.0 (09/02/2019)

  • TypeScript Declarations added

v4.5.1 (08/27/2019)

  • Fix issue where drag-drop from Firefox download list would not add file to drop area

v4.5.0 (08/20/2019)

  • Add option to set server end point headers on a generic level so they’re applied to all end points using server.headers.

v4.4.13 (08/14/2019)

  • Fix issue with CSS font-size being forced to inherit on all child nodes

v4.4.12 (08/01/2019)

  • Fixed memory leaks.

v4.4.11 (07/12/2019)

  • Fix problem with abort statement in file loader logic

v4.4.10 (06/27/2019)

  • Fix issue where Promise returned by addFile would not be rejected if file failed to load.

v4.4.9 (06/06/2019)

  • Update

v4.4.8 (05/27/2019)

  • Fix issue where multiple calls to setMetadata would result in multiple successive calls to prepare file.
  • Fix issue where drop area aspect ratio would not update correctly on resize.

v4.4.7 (05/20/2019)

  • Fix problem with paste throwing an error and counting ignored files when dropping folders

v4.4.6 (05/13/2019)

  • Fix issue where processFiles would re-process local server images.

v4.4.3 (05/09/2019)

  • Fix problem with jumping to the next item when that item had been removed from view

v4.4.2 (04/29/2019)

  • Fix issue where UTF-8 encoded filename was not parsed correctly.

v4.4.1 (04/29/2019)

  • Fix issue where Content-Disposition header filename was not parsed correctly.

v4.4.0 (04/12/2019)

  • Fix issue where addFile did not respect itemInsertLocation setting.
  • Add the beforeDropFile hook which can be used to validate a dropped item before it’s added, make sure dropValidation is set to true as well.

v4.3.9 (04/11/2019)

  • Fix problem where disabling and re-enabling FilePond would not re-enable the browse button.

v4.3.8 (04/09/2019)

  • Improve accessibility of buttons

v4.3.7 (04/08/2019)

  • Fix problem where the abortAll call triggered when destroying FilePond would inadvertently trigger the server.remove end point for each local file.

v4.3.5 (03/26/2019)

  • fix issue where changing the `stylePanelAspectRatio` would not update the container size

v4.3.4 (03/26/2019)

  • Add source code.
  • Add build scripts.
  • Fix onremovefile callback not receiving an error object similar to onaddfile.

v4.3.3 (03/22/2019)

  • Fix issue where aborting a file load while the file was being prepared (for instance, encoded) did not work.
  • Fix issue where 0 byte files would not upload to the server.
  • Add status property to the FilePond instance, use this property to determine the current FilePond status (EMPTY, IDLE, ERROR, BUSY, or READY).

v4.3.0 (03/21/2019)

  • Fix problem where addFiles would not correctly map passed options to files.
  • Fix problem where upload error would prevent processing of other files.
  • Fix problem where the field would not “exist” if it had no value. Now if FilePond is empty the internal file input element is given the name attribute, this is removed when a file is added (as the name is then present on the file’s hidden input element).
  • Add onprocessfiles which is called when all files have been processed.
  • Add onactivatefile which is called when a user clicks or taps on a file item.

v4.2.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

See Also:

You Might Be Interested In:

Leave a Reply