File uploader
The File uploader component allows the users of your app to upload files as attachments.
The user can:
-
Attach one or more files to the app either by selecting the button on the component to open a documentation navigation browser or by dropping files into the component.
-
See the file name and the format once they have uploaded a file.
-
Clear the files to be uploaded.
Note: You can use the files uploaded by the user in an HTTP Request action or in an Extension Kit flow. See how to use the attached files for more details.
Example
You can use the File uploader component to attach a logo and update a customer in ERPx. In this example:
-
Users can attach a .png to a previously selected customer using the File uploader component.
-
Users can upload the .png to the customer in ERPx using a Button component.
Note: The File uploader component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following File uploader properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See templating in components for more details. | Yes |
Label | Enter the text you want to be displayed above the component. | Yes |
Description | Add a description for the component. This is displayed under the Label. | No |
Restrict file formats | Enter the allowed file extension(s) separated by commas (e.g. .pdf, doc). To allow all formats, leave empty. | No |
Maximum total size (MB) | Enter the maximum size allowed for the sum of all the attached files. The minimum value is 1 MB, and the maximum allowed by App Studio is 60 MB. | Yes |
Minimum files | Enter the minimum number of accepted files. | Yes |
Maximum files | Enter the maximum number of accepted files. Ten is the maximum. | Yes |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
List placement | Select the desired position for the list of uploaded files from the drop-down menu. | No |
Validation
Property | Description | Required | |
---|---|---|---|
Optional field | Turn on to make the component optional. By default, the component is required. | No | |
Add rule | Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. | No | |
Message | Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown. | No | |
Additional validations | Select any or all checkboxes to add validations. | No | |
Error | Select the checkbox to add a red error style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the error validation is shown. | Yes | |
Error message | Enter a message to be displayed if the user fills in the input incorrectly. | Yes | |
Warning | Select the checkbox to add an orange warning style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the warning validation is shown. | Yes | |
Warning message | Enter a message to give the user advice on how to better fill in the input. | Yes | |
Positive | Select the checkbox to add a green positive style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the positive validation is shown. | Yes | |
Positive message | Enter a message to tell the user that the input has been correctly filled in. | Yes |
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Hidden rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Disabled | Select the checkbox to disable the component in the end-user app. | No |
Disabled rule | You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Aria label | Enter a text that allows assistive technology to attach a label to the component. | No |
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |
Events
The File uploader component supports the On update event. See events and actions for more details.
How to use the attached files
To use the files attached by the users you must configure them in the Resources tab. We can configure the following resources:
- HTTP
- ERPx API
- Flow
Inside the Content definition section of the resource you can:
-
Enter the Liquid formula inside your JSON by hand, for example,
{{fileUploader1.files[0].content}}
. -
Select the Plus (+) button to display the Liquid template drop-down:
- Open the Fields drop-down.
- Open the File uploader you need. For example,
fileUploader1
.- To use all files: Select
All files
. - To use specific properties of the file: Open the file you want to use. For example,
[0] File 1
. Select the property or properties you want to use depending of the API you are using:name
contentType
content
- To use all files: Select
Note: The file position in the array is randomly assigned. To have control over which specific file you are selecting it is recommended to use different File uploaders. All files are encoded in Base64.