The FileUpload widget enables users to upload a file from a variety of sources to the app backend.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
AcceptSet which file types should be accepted by the fileupload.
Custom AcceptEnter a custom string for accepted file types as a comma separated list of mime types.
DeviceSets the type of device that will be used to upload files.
DisabledThe widget cannot be used.
Drag & DropUpload files by dropping them on the widget.
fixedRatioN/A
HiddenHides the widget from the user.
Hide PreviewHides the preview image.
Images Per RowThe number of images displayed per row in the widget.
List TypeThe type of list displayed by the widget.
Max FilesizeSets the maximum allowed filesize in kilobytes. Not setting this means there is no limit.
QualitySets the compression value.
RatioThe ratio of the files captured.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
Upload File(s) AutomaticallyBoolean value. If set to true, the uploaded file is visible on the application. If false, the file is not visible, even though it has been uploaded.

Style

Name Desciption
Background-colorChange background color of the widget.
Border colorAdd the color for the border.
Border radiusAdd curves to the borders of the widget.
Border styleThe style of the border whether it is solid, dotted or dashed.
Border widthDefine the border width in pixels for the widget.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Font SizeSet the font size in pixels for text.
Right left marginGenerate space in the left and right area of the widget.
Text-alignmentSet left, centered or right. Applies both to icon and text.
Top bottom marginGenerate space in the top and bottom area of the widget.

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus
Click Event that triggers based on touch or click
event The event that triggered the handler
DblClick Event that triggers based on double click
event The event that triggered the handler
FileDeleted Triggered when the file is deleted
FileUploaded Triggered when the file is successfully uploaded
event Object containing the record (event.record) that was created
Focus Event when indicating/ highlighting widget using the cursor

Function

clear ( )

Clears the widget

getDocument ( ) →{ Record }

Returns the document record currently occupying the widget.

Returns

The document record occupying the widget.

getDocuments ( ) →{ Record }

Returns the document records currently held by the widget.

Returns

The document records held by the widget.

getRawFiles ( )

Gets the raw selected files

readFile ( )

Read the contents of a file present in the widget

setQuality ( )

Sets the Image Quality

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) →{ Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) →{ ID }

Returns the ID of the widget.

Returns

The ID of the widget

getValue ( ) →{ Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) →{ Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) →{ Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.