Managing File Upload Component

Modified on Wed, 22 Jan at 8:48 AM

TABLE OF CONTENTS

Appearance Settings
Configuration Settings
Example: Profile Picture Uploader

The File upload Component allows users to upload files directly within the App.

Appearance Settings

The File upload Component includes standard appearance settings, such as size and position, visibility, background, text, padding, margin, border, drop shadow (for details on standard appearance settings, check the Altering the appearance of an App Studio Component article).

Configuration Settings

The following settings are available for the File upload Component:

Setting	Description
Custom Image as an Icon	Provide an image URL or choose an image to use as an icon.
Primary text	Add the main text displayed to users.
Secondary text	Provide the additional text, such as guidelines or restrictions for uploads.
Button text	Define the label for the upload button.
Allowed file types	Specify the types of files users can upload.
Max file size	Specify the maximum file size that can be uploaded and select a unit (KB or MB).
Output as data URL	Toggle this setting to determine how the uploaded file’s content is returned in the output array. Disabled: Returns Base64-encoded data in the `content`field. Enabled: Returns a Data URI in the `content` field (e.g., `data:image/png;base64,`).
Tooltip text	Provide a tooltip to give users additional information when they hover over the Component.
Event handlers	Add new even handlers or manage the existing ones. For details on event handlers, check Using Event Handlers.

Example: Profile Picture Uploader

To illustrate the setup of a File upload Component, let’s create a Profile Picture Uploader.

Step 1: Configure the File Upload Component

To configure the File Upload Component:

Add the File upload Component onto the canvas. If necessary, rename it.

Set the Configuration:

Custom image as an icon	Use an image URL of a camera icon.
Primary text	Enter Upload Your Profile Picture.
Secondary text	Add Maximum size: 2 MB. Accepted formats: .jpg, .png.
Button text	Set to Choose File.
Allowed file types	Specify .jpg, .png.
Max file size	Set to 2 MB.
Output as Data URL	Enable this option if you need the image data encoded as a data URL.
Tooltip text	Enter Click to upload your profile picture.
Event Handlers	Optionally, you can add an event handler that will navigate the user to the Profile Settings tab to complete their profile once the picture is selected. The event handler should have the following properties: Handler name: Navigate to Profile Settings, Event type: File selected, Action: Select a tab.

Customize the Appearance:

Setting	Description
Size and Position	Define size and position settings.
Background	Set the background color to the desired color, for example, #FFFFFF.
Text	Set the color to the desired color, for example, #333333.
Padding	Add 10px of padding to ensure spacing inside the Component.
Border	Use a 2px solid border with rounded corners (5px) and color #CCCCCC.
Drop Shadow	Add a shadow with color #C4C4C4 and a blur radius of 5px.

The screenshot below shows the File Upload Component configured for a profile picture upload.

Step 2: Create a Data Set for the Uploaded Image

In the App Studio, go to App > Data Sets.

Click Add data set and configure it as follows:

Name	uploadedImage
Type	Variable
Expression	{{{FileUpload.selected:last.content}}} Where: FileUpload matches the name of your File Upload Component. :last.content retrieves the most recently uploaded file's content.

Click Add.

This Data Set will store the content of the last uploaded image.

Step 3: Add and Configure an Image Component

Add an Image Component to your interface.
In the Configuration tab of the Image Component, locate the Data set setting and select the uploadedImage data set you created previously.

Step 4: Test the Profile Picture Uploader

Upload an image file using the File Upload Component.
The uploaded image will be displayed in the Image Component.