File Upload

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “File Upload” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Button Type: Defines the type or functionality of a button.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left
  6. Is traditional view: Specifies whether the component or interface should be displayed in a traditional or classic layout style.

2nd Step – Validation

  1. Allow Multiple select: "Yes" means that the user will upload multiple files using this field in the form
    1. Detailed Output: Output with name and url node
    2. Detailed Output Key (mandatory): Specifies the required key for generating a detailed output, typically including file name and URL.
  2. Is Upload on submit: "Yes" means that the upload of the file will happen when the submit button is selected on the form
  3. File Size Limit (MB): Define in MBs the size limit of the files that the users shall upload
  4. Allow Files Types: The user shall select the file type acceptable for uploading using this property
  5. File Type Validation Message: Specifies the required key for generating a detailed output, typically including file name and URL.
  6. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.

3rd Step – Advance

  1. Design
    1. Display Text: Specifies the text to be shown on the interface.
  2. API
    1. Default Storage: Specifies the default storage configuration for storing and retrieving data.
      1. Data Connection: Defines the connection to the data source, such as a database or API.
      2. Method (mandatory): Indicates the HTTP method (e.g., GET, POST) used for API requests.
      3. API Url (mandatory): Specifies the endpoint URL for API requests.
      4. Query Parameters: A set of parameters appended to the API URL to filter or customize the request.
        1. Key: The name of the query parameter.
        2. Value: The value assigned to the query parameter.
        3. Query Variable: A variable that dynamically replaces the parameter's value.
        4. Select Type: Defines the type or format of the query parameter.
      5. Headers: A collection of key-value pairs sent with the API request.
        1. Name: The name of the header parameter.
        2. Value: The value of the header parameter.
      6. Others: Additional settings for the API request.
        1. Enable raw query: Allows the use of raw query strings for custom API calls.
      7. Header Param Name: Specifies the name of the header parameter to be sent with the request.
      8. Header Param Value (Attribute Name): Defines the corresponding value or attribute name for the header parameter.
      9. Delete API: Defines the corresponding value or attribute name for the header parameter.
        1. Data Connection: Connection to the data source for delete operations.
        2. Method (mandatory): HTTP method used for delete requests.
        3. API Url (mandatory): Endpoint URL for the delete API.
        4. Query Parameters: Parameters to include in the delete request.
          1. Key: The name of the query parameter.
          2. Value: The value assigned to the query parameter.
          3. Query Variable: A variable to replace the query parameter value dynamically.
          4. Select Type: Type or format of the query parameter.
        5. Headers: Key-value pairs included in the delete API request.
          1. Name: The name of the header parameter.
          2. Value: The value of the header parameter.
        6. Others: Additional delete API settings.
          1. Enable raw query: Enables custom raw query strings for delete requests.
  3. Mobile
    1. Button Type: Specifies the type of button (e.g., primary, secondary) to be used in the interface.
    2. Size: Defines the size of the button (e.g., small, medium, large).
    3. Button Active Background Color: Sets the background color of the button when it is in an active state.
    4. Button Color: Determines the default color of the button.
    5. Button Active Color: Specifies the color of the button when it is active.
    6. Mobile Icon: Defines the icon to be displayed on the button in mobile view.
    7. Upload Button Label: Specifies the text displayed on the upload button.
    8. Button Border Radius: Sets the radius of the button's corners for styling.
    9. Mobile Documents Icon: Defines the icon for document upload functionality in mobile view.
    10. Mobile Camera Icon: Specifies the icon for camera upload functionality in mobile view.
    11. Form Control Margin Bottom: Adjusts the bottom margin of the form control for spacing.
    12. Enable Upload from Camera (No Documents): Allows users to upload directly from the camera without selecting documents.
      1. Button Type: Specifies the type of button for camera upload.
      2. Align Self: Sets the alignment of the button (e.g., auto, center).
    13. Enable Camera Upload With Documents: Enables the ability to upload from the camera along with document uploads.
      1. Show in Action List: Displays the camera and document options in an action list.
        1. Action Sheet Camera Label: Specifies the label for the camera option in the action sheet.
        2. Action Sheet Document Label: Specifies the label for the document option in the action sheet.
  4. Other
    1. AI Image Analysis: Refers to the functionality that processes and analyzes images using artificial intelligence models.
      1. Google: Specifies the use of Google's AI services for image analysis.
        1. Google AI Function Type: Defines the specific AI function or service used by Google for image analysis (e.g., object detection, image recognition).
      1. Azure: Refers to the use of Microsoft's Azure platform for image analysis.
        1. Image Analysis Type: Specifies the type of image analysis performed through Azure (e.g., classification, feature extraction).
    2. Image Analysis Response Field: The field that holds the response or output generated after processing the image through AI analysis, typically containing data like labels, categories, or confidence scores.

Click “Confirm” and “File Upload” control is configured.