ReactFilePondUpload

Stable Version 1.1.0 (OutSystems 11)
Published on 21 November 2020 by 
Stable Version 1.1.0 (OutSystems 11)
Published on 21 November 2020 by 
Created on 21 December 2019

ReactFilePondUpload

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.1.0)

This version fixes issues with having multiple FilePondUpload blocks on the same page.

When multiple FilePondUpload blocks are on the same page, the WidgetId of the block must be specified as a parameter to the block and client actions FilePondUpload_GetTokens and FilePondUpload_Reset.

Many thanks to Radu Man for identifying and reporting the issue.

Reviews (7)
2020-12-04
in version 1.1.0
Works very nice. We use it for upload of single files.
Took me some diving into, as the explanation was not that straight forward to me. After going trough the code, it cleared up.
Nice work!
2020-11-16
in version 1.0.8
Great component. Would be great if the label from the widget could be overwritten in the config to translate component.
2020-09-02
in version 1.0.8
Great component.  It would be even better if you could make it keyboard accessible.
Category
User interface, Input & forms
Tags
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