ReactFilePondUpload

Stable Version 1.0.8 (OutSystems 11)
Published on 11 Aug by 
Created on 21 December 2019
Details
A React file upload widget that allows multiple file upload, automatic upload, drag/drop, image preview, asynchronous upload and image editing that works on all browsers. It uses the awesome FilePond javascript library. https://pqina.nl/filepond/ by Rik Schennink.
Read More

A file upload widget using the awesome FilePond javascript library https://pqina.nl/filepond/ by Rik Schennink

Features

  • Multiple file upload
  • Asynchronous file upload
  • Instant or click to upload
  • Automatic file upload (no submit button required)
  • Disable submit button while files are uploading
  • Select file via browse or drag/drop
  • Image preview
  • Image editing (purchase of Doka image editing library required)
  • Restrict to specific MIME types
  • Maximum file size
  • Maximum number of uploaded files


Usage (with submit button)

  • Place an UploadBlock in a form,
  • Configure the block with a FilePondUploadConfig structure,
  • Each uploaded file is allocated a token which can be used to retrieve the file,
  • On the client side, when the submit button is clicked, get file tokens with FilePondUpload_GetTokens(). Pass these tokens to a server function to retrieve uploaded files. Then clear the upload control with client action FilePondUpload_Reset(),
  • On the server side, pass the tokens to server action FilePondUpload_GetUploadedFiles(UploadTokens) to retrieve the uploaded files.
  • Uploaded files last for 30 minutes, or until they are retrieved by FilePondUpload_GetUploadedFiles().


Usage (automatic, no submit button required)

  • Place an AutoUploadBlock in a form,
  • Configure the block with a FilePondUploadConfig structure,
  • Each uploaded file is allocated a token which can be used to retrieve the file,
  • On the client side, handle the Uploaded event, passing the Tokens parameter to a server action to process files,
  • On the server side, pass the tokens to server action FilePondUpload_GetUploadedFiles(UploadTokens) to retrieve the uploaded files.
  • Uploaded files last for 30 minutes, or until they are retrieved by FilePondUpload_GetUploadedFiles().


See the FilePondUpload_Sample for examples of how to use the widgets.

See Documentation for how to include Doka files for image editing and further detail of configuration and options.

What’s new (1.0.8)

This version updates FilePond libraries to the latest version 4.19.2 and adds MaxParallelUploads  to configuration.  Also fixed a defect found during testing of this release where only the first upload would be removed after submit when using the (non-auto) UploadBlock.

MaxParallelUploads allows you to control the number of files being uploaded at the same time.  The default is 5.  The intention is to limit the impact on the server when multiple files are being uploaded.  However, for scenarios where many files are being uploaded at one time, and the upload time is more important that the impact on the server, you may increase the number of uploads that may happen at the same time.  Only adjust this value if it is needed.  For most scenarios the default of 5 is sufficient.

Thanks to Jaybriel Lincon Somcio for raising the issue and benchmarking uploads, leading to this improvement.

Reviews (5)
2 Sep (4 weeks ago)
in version 1.0.8
Great component.  It would be even better if you could make it keyboard accessible.
11 Aug
in version 1.0.6
This is really a good component. As outsystems introduce reactive web, this would be a great help on the applications that needs server side uploading of files.
11 Aug
in version 1.0.6
Great library with a lot of flexibility, which Stuart Harris has been increasingly wrapping with great attention and humility to the community's feedback. This component has nailed exactly what we needed in our recent project, and its possibilities just keep growing! Thanks, once again Stuart, especially for the quick and constructive feedback.
Category
UI & Widgets
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Stuart Harris who created this component.
Dependencies
ReactFilePondUpload has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
No consumers yet.
Weekly Downloads