File Uploader

What is it?

The File Uploader Widget allows users to upload files. It is possible to choose more than to upload more than one file depending on the widget settings. When placed in a form, the file(s) uploaded by the end user is/are saved individually with each unique iteration/copy of the form.

How and When to use it?

To add a new File Uploader to your page, simply drag and drop the “File Uploader” widget from the left-hand side of the page screen to the design area of your page. The File Uploader widget can only be placed inside of a Form widget, otherwise, there is an error message. 

Upload

It allows users to upload file(s).

For example, we create an File Uploader, click on the Upload Button  to select file(s) from the local storage or we can drag and drop the file(s) on the file uploader to upload. 

The runtime display are shown below:

Runtime (Web View)

Download

It allows users to download the uploaded file(s).

For example, on a File Uploader with uploaded file(s), click on Download Button to select a file to download (See Appendix for Fast Keys) .

The runtime display are shown below:

Delete

It enables users to delete the uploaded file(s).

For example, on a File Uploader with uploaded file(s), select an uploaded file then click on the Delete Button to delete the selected file (See Appendix for Fast Keys).

The runtime display are shown below:

How to configure it?

1. Drag a File Uploader into the Form

2. Click the File Uploader and then click the setting button  to open Widget Property Settings. 

3. The Widget Property Settings is shown, which contains three tabs, General, Visibility, and Function. We will demonstrate how each tab and property is used. 

Introduction of General Properties

The tab General has four subheaders, “Basic”, “Configurations”, “Style” and “Position, Size and Layout”.

Basic

The fields in “Basic” are Name, Display Name, and Description. If you leave the display name field blank when setting up your widget, the name field will automatically become the Display Name. If you fill in both fields, the system will use the Name field as an internal reference (like in page builder), while showing the display name to your users in Production. 

Configurations

Upload From App Camera Only

It requires the user to take photo(s) or take video(s) as the way to upload the file(s). 

For example, we create a File Uploader, look through the Upload From App Camera Only property under Configurations in the Widget Property Settings. 

Users may enable the “Upload From App Camera Only”, which only allows the user to upload photo(s) or video(s) taken from the app camera.

The design time and the runtime display are shown below:

Sort By

It enables the user to sort the uploaded files. 

For example, we create a File Uploader, look through the Sort By property under Configurations in the Widget Property Settings. 

The default setting is “No Sorting”.

Users may open the dropdown list, which allows the user to sort the uploaded files by file name in either ascending or descending order, and by file size in ascending or descending order.

The design time and the runtime display are shown below:

User can also click on Sort By Button from the runtime display widget of File Uploader to enable sorting:

Disable Multiple Uploads

It disables the user to upload multiple files simultaneously. 

For example, we create a File Uploader, look through the Disabled Multiple Uploads property under Configurations in the Widget Property Settings. 

Users may enable the “Disabled Multiple Uploads”, which only allows the user to upload one file at a time.

The design time and the runtime display are shown below:

No. of File(s)

It restricts the maximum number of files that a user can upload. 

For example, we create a File Uploader, look through the No. of File(s) property under Configurations in the Widget Property Settings. 

Users may activate the “Max. of {} files” option and specify their preferred maximum number of uploads instead of the default setting of “No Limit”.

The design time and the runtime display are shown below:

File Size Per FIle

It restricts the maximum size(in MB) of a file that a user can upload. 

For example, we create a File Uploader, look through the FIle Size Per File property under Configurations in the Widget Property Settings.

The “Default” setting allows uploads of up to 50 MB per file.

Users may enable the “Max. of {} MB” property and set their desired maximum upload size (in MB) between 1 and 50 MB.

The design time and the runtime display are shown below:

Total File Size

It restricts the maximum total size(in MB) of files that a user can upload. 

For example, we create a File Uploader, look through the Total File Size property under Configurations in the Widget Property Settings. 

Users may change the setting from the default ”No Limit” to the “Max. of {} MB” property and set their desired maximum total upload size.

The design time and the runtime display are shown below:

Style

The fields of Style are Show Label, Label Style, and Value Style.

By default, Show Label is checked. If it is not checked, the left side of the widget that shows the widget name is removed and the field of the widget fills the entire widget area.

Label Style and Value Style both have the same Size option. 

Label Style has two more fields: Alignment, and Width, which are in units of pixels (px) and accepts a numerical value. In Alignment, you can choose to inherit the previous alignment or choose your own alignment (left, centre, right).

Position, Size and Layout

The options for Sizing Mode are Absolute Size, Relative Size and Auto-height .In Absolute Size, the dimensions of the widget are the same in the Page Builder and Production. In Relative Size, the right and bottom sides of the widget expand to completely fill the screen/window in Production. 

In Position, various parameters of the widget can be adjusted. These parameters change depending on what is selected in Sizing Mode. 

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”. It controls whether this label would be displayed on both platforms. 

Introduction of Visibility Tab Properties

Looks Read-Only

It restricts the users’ ability to modify a file uploader, including uploading and deleting file(s), while it does not affect their ability to download uploaded file(s) from the file uploader. 

For example, on a File Uploader with uploaded file(s), look through the Looks Read-Only property under Visibility in the Widget Property Settings. 

Users may enable the “Looks Read-Only”, which only allows the user to download file(s) from the file uploader. The Upload Button and the Delete Button of the file uploader would be disabled.

The design time and the runtime display are shown below:

Introduction of Function Tab Properties

The first column lists all the available Run Time User Roles. In the second column, you can enable or disable the Add Only Function for each user role. If you need further guidance, simply click the question mark icon located in the top right corner of this tab to open a helpful tooltip explaining its functionality.

Appendix: Keyboard Controls

File Uploader supports several fast keys for file(s) selection.