File uploader

The File uploader component allows the users of your app to upload files as attachments.

The user can:

File uploader with file

Note: You can use the files uploaded by the user in an HTTP request 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:

Note: The File uploader component follows the WCAG 2.0 AA accessibility guidelines.

File uploader component

Configuration example

This example shows how to configure the Customer app (see Example of usage). Follow these steps to configure it:

  1. Customer logo file uploader:

    • Drag the File uploader component to a previously added Layout component in the canvas.

    • Select the File uploader component in the canvas and go to the Properties panel.

    • Open the Main menu and configure:

      • Component ID: Enter a meaningful name and select the Save button.
      • Title: Enter the text you want to appear at the top of the component. For this example, Customer logo.
      • Description: Enter the text you want to appear under the file uploader. Typically, if you have turned on the Restrict file formats switch, this will be the accepted file formats. For this example, 'Accepted file format: .png'.
      • Restricted file formats: Turn on to specify which file formats are allowed. In this example, '.png'.
    • Open the Validation menu and configure:

      • Required field: Turn on to make the component mandatory.
  2. Upload to server button:

    • Drag the Button component to a previously added Layout component in the canvas.

    • Select the Button component in the canvas and go to the Properties panel.

    • Open the Main menu and configure:

      • Component ID: Enter a meaningful name and select the Save button.
      • Text: Enter the text you want to appear in the component. For this example, 'Upload to server'.
    • Open the Styles menu and configure:

      • Icon: Choose an icon to be displayed before the text entered in the Text field.
    • Open the Logic map tab in the bottom-right corner and configure:

      1. Drag the On click event to the viewport.
      2. Drag the Field validation action to the viewport and connect it to the On click event. This action allows you to configure the Required field property of the File uploader component.
      3. Drag the HTTP request action to the viewport and connect it to the Green check handle of the Field validation action. Select the Resource where you have configured the API call from the HTTP drop-down in the right panel. See how to use the attached files for more details.

        Customer drop-down

      4. Drag three Toast actions to the viewport. Connect them as shown in the picture and configure the Type of toast, the Heading and enter a text in the Body.

        File uploader logic map

Note: Only the properties relevant to the example are explained.

Properties

The following File uploader properties are available:

Main

Property Description
Component ID Enter a unique name for the component. See templating in components for more details.
Title Enter the text you want to be displayed above the component.
Subtitle Enter a text under the title to include extra details if needed.
Button text Enter a text for the button, by default 'Upload files'.
Description Enter a text line at the bottom of the component. The field is pre-filled for you to complete with the accepted file formats.
Restrict file formats Turn on to allow only certain file formats. If turned off all formats are accepted.
File format Enter the accepted file formats if Restrict file formats switch is turned on. For more than on extension separate with commas, for example '.jpeg, .pdf, .png'.
Maximum file size (MB) Enter the maximum file size for the entire upload, including all uploaded files. Maximum allowed by App Studio is 60 MB.
Minimum files Enter the minimum number of accepted files.
Maximum files Enter the maximum number of accepted files. 10 is the maximum.

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

Validation

Property Description
Required field Turn on to make the component mandatory. By default, the component is optional.
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. See add rules to trigger properties for more details.
Message Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown.

Interactions

Property Description
Hidden Select the checkbox to hide the component in the end-user app. You can set rules to hide the component using Liquid. The rules are only available when hiding the component with the checkbox not when hiding the component from the canvas with the Eye icon in the Layers panel.
Disabled Select the checkbox to disable the component in the end-user app. You can set rules to disable the component using Liquid.

Note: See add rules to trigger properties for more details on setting rules to these properties.

HTML

Property Description
Aria label Enter a text designed to help assistive technology attach a label to the text input.
Title Enter a text to be displayed as a tooltip when hovering the mouse over the component in the end-user app.
Tab index Enter the navigation order for keyboard navigation.

Events

The File uploader component supports the On update event. See events and actions for more details.

File uploader logic map

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:

Inside the Content definition section of the resource you can:

  1. Enter the Liquid formula inside your JSON by hand, for example, {{fileUploader1.files[0].content}} .

  2. 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

File uploader Templating drop-down

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.