Data Import component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component overview

The Data Import component is a UI element that enables you to configure data import from a .csv file into a business process. Form.io does not host any uploaded files in forms. Instead, the files are stored with the storage provider, digital-document-service.

Admin portal does not have access to digital-document-service.
Use the Data Import component from the Latest components section.

2. Main functions

The Data Import component supports many options when interacting with the process forms. The options are divided into tabs.

  • Display

  • File

  • Data

  • Validation

  • API

  • Conditions

  • Table

  • Label: The name of the component that appears next to it.

  • Label Position: determines the position of the name relative to the component (top, right, left, or bottom).

    • For options Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: sets the width occupied by the Label as a percentage relative to the input.

      • Label Margin: sets the offset between Label and input in percentage.

  • Description: a description of the component that can help users.

  • Tooltip: The text displayed when hovering the cursor over the component.

  • Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.

  • Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.

  • Disabled: A setting that disables editing.

  • Display as image(s): Display an image in the window instead of the downloaded file’s name.

  • File Minimum Size: Set the minimum file size.

    • The value must be a positive number.

    • Use a dot as a separator in the case of decimal fractions.

    • Specify one of the following measurement units: В, КВ, МВ, or GB. If you don’t specify a measurement unit, it will be set to bytes (B).

    • The value cannot exceed the value of the File Maximum Size field.

  • File Maximum Size: Set the maximum file size.

    • The value must be a positive number.

    • Use a dot as a separator in the case of decimal fractions.

    • Specify one of the following measurement units: В, КВ, МВ, or GB. If you don’t specify a measurement unit, it will be set to bytes (B).

    • The value cannot exceed the default value set by the registry administrator.

  • Clear value when hidden: allows to configure the clearing of the component value when the component becomes hidden on the page.

  • Custom default value: allows to set your own, custom default value for the component. This function uses JS insert. More about JS insets.

    • JavaScript: set your own value by using javascript

    • JSONLogic: set your own value by using JSONLogic.

  • Calculated value: allows to calculate the value of a component based on other data or conditions. Unlike Custom default value, the value of the field will be calculated every time any changes occur on the form - the user enters data, it is completed by http requests. This function uses JS insert. More about JS inserts.

    • JavaScript: adjust your own value with javascript help.

    • JSONLogic: adjust your own value with help of JSONLogic.

  • Required: the field is required to be filled in before sending the form.

  • Resource for validation: Specify the resource to use for file validation.

  • Custom error message: a special error message displayed when data fails validation.

  • Custom validation: custom validation, which allows you to create validation checks specific to your needs. This function uses JS insert. More about JS insert.

  • Property Name: the name of the field in the data structure that will be sent when the form data is submitted. It is also the name of the field in the data structure with which the form is prefilled. The current value of this field can be checked in the data structure displayed on the Query tab in the form design interface.

  • Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

    This function uses JS plugins. For details, see Variables in JavaScript insertions.

  • Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

  • Table View: determines whether to display the element in the table and in the EditGrid.

  • Table column width: allows to customize the column width in the table that is displayed when using the component in EditGrid.

3. Data format

Submission
 // data from digital-document-service after uploading the file
[
    {
        checksum: "61b7aeab944b33b867550c4c4d94d66620228ea1094ed2dedb5003cc43807201",
        id: "f8ef4f2b-c37c-49a5-ba9a-a04c51507240"
    }
]