Managing File Uploaded Component

Modified on Wed, 15 Jan at 4:20 AM

TABLE OF CONTENTS

Appearance Settings
Configuration Settings
Example: Profile Picture Uploader

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

Appearance Settings

The File uploaded 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 uploaded 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 uploaded Component, let’s create a Profile Picture Uploader.

To configure the Profile Picture Uploader:

Add the File uploaded Component onto the canvas.

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	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 Uploaded Component configured for a profile picture upload.