How to Use FilePondUpload

Follow these steps to use the Upload Block or the Auto Upload block in your application.

Make sure you also have the UploadCore component installed. FilePondUpload uses UploadCore for its temporary file storage, as in ODC a library cannot have its own file storage.

1. Create the dependencies that allow the usage of the component

The UploadBlock and AutoUploadBlock are used to upload files from the client side. The user drags multiple files onto the file upload widget, either by selecting the files or dragging a folder. The UploadBlock requires the user to click on a Submit or Save button. The files show upload progress as well as a thumbnail if the files are images.

To enable it establishes a dependency in your application according to the picture below.

Manage Dependencies

2. Using the UploadBlock on the screen

Create a form and place the UploadBlock inside to be able to upload a file.

3. Understand and configure the block with a FilePondUploadConfig structure

Create a client action, name it "GetUploadConfig" and set the function to yes.

Name: Name to use for the internal file upload form control.

LabelIdle: Label shown to indicate this is a drop area. Defaults to 'Drag & Drop your files or Browse '.

MaxFiles: Maximum number of files to upload. Defaults to zero. Zero means unrestricted.

MaxParallelUploads: The maximum number of parallel uploads at a time.

MaxFileSizeMb: The maximum size of a file in megabytes. If zero, there is no maximum.

AcceptedFileTypes: Mime types accepted for upload. If empty, all file types are accepted.

MustMatchFilenameRegex: If specified, the filename must match this regular expression, otherwise upload will error.

MustNotMatchFilenameRegex: If specified, upload will error if the filename matches this javascript regular expression.

MatchFilenameCaseSensitive: If either match filename options are specified, this will control if the match is case sensitive.

AllowBrowse: Allow the user to browse for files. Default = True.

AllowDrop: Allow the user to drop files. Default = True.

DropOnPage: Catch all files dropped on the webpage. Default = False.

DropValidation: When enabled, files are validated before they are dropped. A file is not added when it’s invalid. Default = False.

InstantUpload: Upload immediately the file is selected or dropped.

PreviewImages: If the file is an image, show a preview.

ImageEdit: Edit images. Requires the Doka image plugin.

InstantImageEdit: Edit images as soon as they are uploaded. Requires the Doka image editing library. See ImageEdit configuration option and ReactFilePondUpload forge component documentation for further detail.

DisableSubmit: Disable the submit button during file upload. Adds attribute disabled="disabled" when files are uploading and removes when done.

SubmitButtonId: The HTML id of the submit button if DisableSubmit is set to yes.

DefaultFileURL: The url for the default file. Set InstantUpload to False to prevent immediate upload.

StyleAspectRatio: Set a forced aspect ratio for the FilePond drop area. Useful to make the drop area take up a fixed amount of space. For example when cropping a single square image. Accepts human readable aspect ratios like '1:1'. Default is an empty string.

StylePanelLayout: Set a different layout render mode. Can be either 'integrated', 'compact', and/or 'circle'. Compact mode will remove padding, integrated mode is used to render FilePond as part of a bigger element. Circle mode adjusts the item position offsets so buttons and progress indicators don’t fall outside of the circular shape. Default is an empty string.

Log: Log messages in javascript. Only set to True when debugging. Set to False for normal production use.

Once those configurations are understood, let's configure them.

Create a client action, name it "GetUploadConfig" and set the function to yes to later associate the button.

Fill the properties as below:

GetFileUploadConfig action

4. Create a flow to get the Tokens

It's mandatory to get the tokens to be able to upload a file. Each uploaded file is allocated a token which can be used to retrieve the file.

So on the client side, when the submit button is clicked, get file tokens with FilePondUpload_GetTokens(). Or if using the AutoUploadBlock handle the Uploaded event to retrieve the Token/s. Pass these tokens to a server function to retrieve uploaded files.

5. Create a flow to pass the tokens

To retrieve the uploaded file we need to pass the tokens. This is where we use the UploadCore component.

So on the server side, pass the tokens to service action Upload_GetUploadedFile() or Upload_GetUploadedFiles() to retrieve the uploaded files.

Uploaded files last for 30 minutes, or until they are retrieved by Upload_GetUploadedFile() or Upload_GetUploadedFiles().