File Upload
  • 15 Oct 2024
  • 6 Minutes to read
  • PDF

File Upload

  • PDF

Article summary

File Upload control enables the form consumer to upload any document(s) of the accepted file type within the defined maximum file size limit.

Figure: File Upload Control

Use Case

User Persona: Application Designer

Solution

Novatech, has a requirement to attach the licensing documents while adding a new asset to the system.

Application Designer can drag and drop the File Upload control on the form and configure its properties accordingly. He can attach multiple files (max 5) and the allowed file types are PDF, Word, and JPEG.

Configure File Upload

To configure File Upload Control, perform the following steps:

  1. Navigate to Form Designer > Design Form > Controls.

  2. Expand Form Controls to locate the File Upload control.

  3. Drag and drop File Upload control on the design canvas. Hover over the added control to access the Settings and Delete icon.

    Figure: File Upload Control

    Icon

    Description

    Settings icon will enable the Application Designer to configure the Switch Control in the Main Form.

    Delete icon will delete the Switch control from the Main Form.

    Controls for adjusting the size of Switch on Canvas.

  4.  Click Settings icon to configure the File Upload control. On the Settings pop-up window, the following tabs can be configured.

Properties

The properties of File Upload display the following sections:Figure: Properties

General

In this section you can define the general properties of the File Upload control such as Title, Subtitle, File Extension Properties, Maximum File Size and Allowed File Types.

For the field description, refer to the following:

  1. Enter Title of the File Upload as it must be displayed in the Form.

    Example: If you want to upload attachments, then you can title the File Upload control as Attachment.

    Figure: Title attribute in General of File Upload control

    Note

    If you change the Title name, the File Upload control name changes according to Title name on the top. This is displayed in the previous figure.

  2. Enter Sub Title.
    This is a brief description for the file upload control, providing context about its purpose or the type of files users should upload. It appears directly below the control.

    Figure: Sub Title in General properties of File Upload control

    The following figure displays Sub Title on the Form Canvas screen.

    Figure: Sub Title

  3. Click File Extension Properties dropdown and select Copy from Global settings.

    Figure: File Extension Properties

  4. Select Maximum Upload File Size (In Bytes).

  5. As you select File Extension Properties in the step number 3, all the File Types configured in Global Settings are populated in the Allow File Types dropdown. Any newly added extension on Global settings is also displayed here after CR Approval.

    Figure: Allow File Types

    These are configured in the Global settings under Platform. For more information, refer to Attachment Properties.

Informative

All the information about the File Upload control is defined in this section.

  1. Enter Help Text, this field also supports rich text editor by enabling the Rich Text switch control.
    It provides descriptive text or instructions to assist users in understanding how to use the file upload control.

    Figure: Help Text in File Upload control

    If you enable Rich Text, then the editor is displayed accordingly.
    Figure: Rich Text Editor in  Help Text

  2. Enter Watermark, this acts as placeholder for the field.

    Figure: Water Mark

    The configured Watermark is displayed on the Consumer Form as well.

    Figure: File Upload on Main Form - Consumer

  3. Enter ToolTip, this is info message as how the user should act about the field.
    Figure: ToolTip on File Upload control

    The configured Tooltip is displayed as below in the Form.

    Figure: ToolTip

Validation Message

Configure properties for file upload Validation Message.

Figure: Validation Message

For more information, refer to the following Field Description:

Field

Description

Invalid File Type Message Detail

Enter text (error details) to be displayed when user is trying to upload an invalid File Type.
Example: You can provide error message as shown "Allowed file types are .doc, .jpeg".

Invalid File Size Message Detail

Enter text (error details) to be displayed when user is trying to upload a file of size greater than the defined limit.

Example: If the maximum file size is defined as 350 KB, then the message can be displayed as " Maximum upload size is 350KB".

Invalid File Limit Message Detail

Enter text (error details) to be displayed when user is trying to upload files more than the set file limit.

Example: If file limit is set to 2 and user is trying to upload more than 2 files, then the message can be displayed as " Maximum number of files exceeded."

Invalid File Type Message Summary

Enter text (error summary) to be displayed as summary when user is trying to upload an invalid File Type.

Invalid File Size Message Summary

Enter text (error summary) to be displayed when user is trying to upload a file of size greater than the defined limit.

Invalid File Limit Message Summary

Enter text (error summary) to be displayed when user is trying to upload files more than the set File Limit.

Note

Include {0} if you want the user-selected file name to appear dynamically in the error message summary.

Advance

To configure Advance Properties, select Advance tab, this enables the Application Designer to allow multiple File Uploads on the Form by selecting Allow Multiple switch control.

Figure: Advance File Upload configuration

Validations

This section contains pre-built validations to save time and effort by ensuring data accuracy and completeness without the need for custom rules.

To configure Validations, perform the following steps:

  1. Select Validations tab.
    The configuration screen is displayed.

    Figure: Validation of File Upload

  2. Select Tenant.
    This displays additional field as when the File Upload should be enabling Application Designer to select the Validation.
    Figure: Validation condition

    Following are Validation options in the dropdown:
    Figure: Validation Options

    Field

    Description

    Mandatory

    Select Mandatory from the dropdown list to make the control mandatory. It ensures that the field must be filled out before submitting the form.

    Disabled

    Select Disabled from the dropdown list to make the control a disabled control. This prevents users from interacting with a field, effectively making it read-only and preventing any changes or inputs.

    Hidden

    Select Hidden from the drop-down list to make the control a hidden control.

    Editable

    Select Editable from the dropdown list to make the control editable.

    Set File Type

    Select Set File Type from the dropdown list to validate based on File Type.

    Set File Limit

    Select Set File Limit from the dropdown to validate based on File Limit.

    Less Than (File Size)

    Select Less Than (File Size) from the dropdown to validate less than the file size.

    More Than (File Size)

    Select More Than (File Size) from the dropdown to validate more than the file size.

  3. Upon selecting one of the above option, following screen is displayed:
    By default, Every Time is selected.
    Figure: Validate

    Every Time: Select Every time if you want to display this control always without any specific conditions.

    Below Conditions Meet: Select this option if you want the validations on the control to be triggered based on a specific condition(s).

    Figure: Below Condition Meet Validation for File Upload


    Configure the conditions using Field Operator and Value:

    Field: Choose the field from the drop-down list to which the condition applies.

    Value: Define the value for the chosen field, determining when the condition should be triggered. Enter the value in a text box for non-referenced fields like short and long text. For referenced fields such as single choice and tree control, select the value from the respective field type.

    Operator: Select the appropriate operator from the drop-down list, which varies based on the selected field type.

    Click icon to add more conditions.

    Click icon to delete conditions.

Appearance

Customize controls appearance by aligning brand colors through appearance properties, enhancing user experience, and reinforcing brand identity.

Figure: Appearance

To know more about the fields that are available under the Appearance section, see the Field Description given below.

Field

Description

Font Type

Select the desired font from the drop-down menu to customize the control.

Font Color

Select a font color from the color palette to enhance the visibility and aesthetics of the control.

Font Size

Select the desired font size to your preference for better readability and presentation for the control.

Font Style

Select either Bold, underlined, or Italic font style to emphasize specific text within the control.

Security

The Security tab ensures data security and privacy by applying restricted access or encryption to sensitive field data, ensuring that only users with authorized roles can access or modify it.
Figure: Security

Select Encrypted.
Enable this option to ensure sensitive information remains secure and confidential by making it unreadable without the appropriate decryption key. 

Example: In a document management system for sensitive contracts and agreements, uploaded files containing confidential information, such as partnership agreements or non-disclosure agreements, can be encrypted. Only authorized individuals with decryption keys, typically legal advisors or designated executives, are granted access to view or modify these documents.

For more details about Security, see Form Security.

Click Save to save the configurations. 
Configurations get saved, the window closes, and the control moves back to the design canvas.

Click Cancel if you want to discard the configuration.


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.