Uploader
The "Uploader" widget is an interactive UI that allows users to upload files/documents to your App.
Example
Using the File Uploader
Users can upload their files by either the "drag-n-drop" method or by "choosing" the files via the file-browser.
To use the file-browser:
- Click the "Uploader".
- Choose your file. (On the file browser that opens.)
- Click "Open n Submit". (A preview image of the file/files will be displayed.)
[Note: To be able to upload multiple files the "multi-select" property must be checked.]
Used for loan application forms, account opening forms, or other similar forms where the users have to upload documents for user validation/verification processes.
In A8Studio
Properties
| Property | Description |
|---|---|
| ID | A random alpha-numeric code that's used as a reference ID. It is auto-generated by default; however, you can edit it to your need. |
| Bind | Mapping between different Forms is done using the “Bind” name. To link the Data collected through a form/component, choose the Bind name of the specific form/component as the Bind name of your current form/component, which should link their Data together. |
API Methods
setSize
Sets the size of the widget based on the passed parameters. You can choose between the Small, Medium, and Large pre-set scales.
- Method
- Usage
setSize(size: "small" | "medium" | "large"): void
//Sets the size to small
a8forms.uploader("uploaderId").setSize('small')
//Sets the size to medium
a8forms.uploader("uploaderId").setSize('medium')
//Sets the size to large
a8forms.uploader("uploaderId").setSize('large')
- Small
- Medium
- Large
//Sets the size to "Small"
a8forms.uploader("uploaderId").setSize('small')
//Sets the size to medium
a8forms.uploader("uploaderId").setSize('medium')
//Sets the size to large
a8forms.uploader("uploaderId").setSize('large')
setVisibility
Sets if elements of the given category is visible in this view.
- Method
- Usage
setVisibility(visible: boolean): void
// setting the visibility true makes the element to visible
a8forms.uploader("uploaderId").setVisibility('true')
// setting the visibility false makes the element to not visible
a8forms.uploader("uploaderId").setVisibility('false')
setVisibilityCondition
Sets the hide condition
- Method
- Usage
setVisibilityCondition(condition: string): void
// Hides the string
a8forms.Uploader("uploaderId").setVisibilityCondition("1 == 1");
setLabel
Sets the label of the field.
- Method
- Usage
setLabel(label: string): void
// Sets the field's label to 'Upload Docs'
a8forms.uploader("uploaderId").setLabel('Upload Docs')
setMultiple
Sets the selection mode to be multiple which allows the user to select multiple files.
- Method
- Usage
setMultiple(multiple: boolean): void
// can select multiple files as multiple is set to true
a8forms.uploader("uploaderId").setMultiple('true')
// cannot select multiple files as multiple is set to false
a8forms.uploader("uploaderId").setMultiple('false')
setRequired
Sets a field to be required or not.
- Method
- Usage
setRequired(required: boolean): void
// Sets the field as required
a8forms.uploader("uploaderId").setRequired('true')
// Sets the field as not required
a8forms.uploader("uploaderId").setRequired('false')
setReadOnly
Sets the ReadOnly flag for this context.
- Method
- Usage
setReadOnly(readOnly: boolean): void
// Sets the field to read only, not editable by the user
a8forms.uploader("uploaderId").setReadOnly('true')
// Sets the field to read only, editable by the user
a8forms.uploader("uploaderId").setReadOnly('false')