---
title: "File Component"
slug: "file-component"
updated: 2025-12-04T19:35:00Z
published: 2025-12-04T19:35:00Z
canonical: "docs.unqork.io/file-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# File Component

UDesignerClassic Designer

> [!TIP]
> Before using the File component, please review our [Working With Files in Unqork](/v1/docs/working-with-files-in-unqork) article to better understand expectations and limitations when working with files.

The **File component** lets your end-user upload files, like supporting documents or scanned images. This [component](/v1/docs/module-builder-component-library) adds an easy-to-use file uploader element to your [applications](/v1/docs/introduction-to-unqork-applications) so end-users can drag and drop files into the component area or use a browse function to select a file to upload.

Here are some scenarios when you'd use a File component:

- A mortgage application where the end-user needs to upload financial documents.
- A job application where the end-user uploads their resume.

Once uploaded, files store in a data object. The data object contains the following:

- The file data is represented as a cloud storage URL (submitted as Base64 or binary).
- The file type.
- The file name.
- The file size.

Uploaded files become available to view, download, or delete as needed. How end-users access the file is intentionally dependent on the end-user’s OS:

- **Desktop (Mac/Windows/Linux)**: The file opens in the desktop’s native file browser.
- **Mobile (iOS/Android)**: Mobile devices typically allow the end-user to open the file using their photo library, file app, or camera app.

You'll find the File component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> [!TIP]
> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

### Display Panel

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

#### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(16).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |

#### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Component** | Shows or hides the component from view. Setting the Hide Component toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)** hides the component in Express View. Setting the toggle back to OFF unhides the component. By default, Hide Component is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |

#### Formatting

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |
| **Allow Multiple Files Selection** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, the end-user can select multiple files when browsing for files to upload. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****.** |
| **Display Thumbnail Images of Icons** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) (ON), uploaded image files render a preview. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****,** uploaded files display as text with a file icon. > [!TIP] > This setting only works when the **Parse Files on Upload** and **Store Data in Database** settings are set to (ON). Doing so ensures the component renders the Base64 encoded string of the file.× By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |
| **Drop Zone Label Text** | Text that guides the end-user to upload a file. The text displays inside the boundaries of the drag and drop area. By default, the text is **Drag & drop your files here, or**. The Browse Files Link Text immediately follows this text. |
| **Starting Upload Message** | Feedback text that displays when a file begins to upload. By default, the text displays **Starting upload**. |
| **Browse Files Link Text** | The label text for the link allows end-users to browse their computer for files. By default, the link text shows as **browse**. |
| **Drag & Drop Not Supported Message** | Text that displays when an end-user's browser doesn't support drag and drop. By default, the text shows as **File Drag/Drop is not supported for this browser**. |
| **Header for File Name Column** | The header label for the column lists the individual file names. By default, the header is **File**. |
| **Header for File Size Column** | The header label for the column listing the file sizes. By default, the header is **Size**. |

### [![A static image displaying the File component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component%20With%20New%20Display%20Settings_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20With%20New%20Display%20Settings.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Data Panel

#### Data Storage

| Setting | Description |
| --- | --- |
| Store Data in Database | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.** |

### [![A static image displaying the File component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Actions Panel

#### Triggers

| Setting | Description |
| --- | --- |
| **Post Upload** | Enter the **Property ID** of a component you'd like to trigger after the file uploads. |

### [![A static image displaying the File component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Validation Panel

#### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****,** the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

### [![A static image displaying the File component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Advanced Panel

#### Additional Data Options

| **Setting** | Description |
| --- | --- |
| **Compress .jpg and .png Files** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, uploaded images compress. This setting only supports .jpg and .png image formats. By default, this toggle is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.** |
| **Parse Excel Files with Multiple Tabs** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, all tabs of an uploaded multi-tab Excel file parse into a single JSON structure. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |
| **Parse Files on Upload** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, the file’s data object updates to a cloud storage link, resolving the base64 string. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**, the file’s data object is a reference, with the file stored in the cloud the moment the submission is created. > [!TIP] > For this setting to function correctly, the Store Data in Database setting must be set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**. By default, this setting is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.** |

#### Additional Validation Options

| Setting | Description |
| --- | --- |
| **Set Maximum Size** | Validation that limits the size of each file an end-user can upload. It might take longer to upload larger files depending on the browser and network connection. > [!NOTE] > This value must be equal to or less than your use case's file size limit. These thresholds are 18 MB, 100 MB, and 500 MB. To learn more about file size limitations, see our [Working With Files in Unqork](/v1/docs/working-with-files-in-unqork) article. |
| **File Size Helper Text** | A quick tip explaining the file size limits of your File component. |
| **File Size Error Message** | Custom error message that displays below uploaded files that exceed the maximum size. |

#### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

#### Accepted File Formats

| Setting | Description |
| --- | --- |
| **Set File Formats to Accept** | Sets the file types accepted by this component. To allow the upload of any file type, simply set the field value to *. To limit file types, list the approved file types by adding a comma between each value. For example, .jpg,.png,.gif. |

## [![A static image displaying the File Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Adding a File Component

Let's create a basic File component configuration that prompts the end-user to upload a PDF version of their resume.

1. 1.In the Module Builder, drag and drop a File component onto the canvas.
2. In the Property ID field, enter **fileResume**.
3. In the Label Text field, enter `Submit Your Resume`.
4. Navigate to the component's **Validation** settings.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.**
6. Navigate to the component's **Advanced** settings.
7. In the **Set File Formats to Accept** field, enter `.pdf`.

> [!NOTE]
> By entering .pdf in this field, the component only accepts PDF files from the end-user.

[![A static image displaying file component's advanced settings. The Set File Formats to Accept field is set to .pdf](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_ExampleAdvanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20ExampleAdvanced.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
8. Click **Save Component**.
9. **Save** your module.

Preview the module in Express View to view the following functionality:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

## Data Structure of a File Component

The File component's data stores in submission data as an array of objects. In the example below, the **fileResume** File component displays the uploaded content in a table. Opening an object in the array displays a set of key/value pairs containing information about the file.

Here's how the File component looks in Express View:

[![A static image of the File component in Express View. A PDF has been uploaded and displays its filename in a table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_ExpressViewImage_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20ExpressViewImage.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

Here's how the same File component looks in the DevTools Console:

[![A static image displaying File component data in the DevTools Console view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_dataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file%20dataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

> [!TIP]
> Before using the File component, please review our [Working With Files in Unqork](/v1/docs/working-with-files-in-unqork) article to better understand expectations and limitations when working with files.

The **File component** lets your end-user upload files, like supporting documents or scanned images. This [component](/v1/docs/module-builder-component-library) adds an easy-to-use file uploader element to your [applications](/v1/docs/introduction-to-unqork-applications) so end-users can drag and drop files into the component area or use a browse function to select a file to upload.

Here are some scenarios when you'd use a File component:

- A mortgage application where the end-user needs to upload financial documents.
- A job application where the end-user uploads their resume.

Once uploaded, files store in a data object. The data object contains the following:

- The file data is represented as a cloud storage URL (submitted as Base64 or binary).
- The file type.
- The file name.
- The file size.

Uploaded files become available to view, download, or delete as needed. How end-users access the file is intentionally dependent on the end-user’s OS:

- **Desktop (Mac/Windows/Linux)**: The file opens in the desktop’s native file browser.
- **Mobile (iOS/Android)**: Mobile devices typically allow the end-user to open the file using their photo library, file app, or camera app.

You'll find the File component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Intro.webm?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

## About the Configuration Window

> [!TIP]
> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

### Display Panel

[![A static image dispaying the Display component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

#### Default State Options

| Setting | Description |
| --- | --- |
| **Disable User Input** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****.** |
| **Hide Component** | Shows or hides the component from view. Setting the Hide Component toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)** hides the component in Express View. Setting the toggle back to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **OFF** unhides the component. By default, the Hide Component toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****.** |

#### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(16).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |

#### Formatting

| Setting | Description |
| --- | --- |
| **Allow Multiple Files Selection** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, the end-user can select multiple files when browsing for files to upload. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****.** |
| **Display Thumbnail Images of Icons** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****,** uploaded image files render a preview. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**, uploaded files display as text with a file icon. > [!TIP] > This setting only works when the **Parse Files on Upload** and **Store Data in Database** settings are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**. Doing so ensures the component renders the Base64 encoded string of the file. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****.** |
| **Drop Zone Label Text** | Text that guides the end-user to upload a file. The text displays inside the boundaries of the drag and drop area. By default, the text is **Drag & drop your files here, or**. The Browse Files Link Text immediately follows this text. |
| **Starting Upload Message** | Feedback text that displays when a file begins to upload. By default, the text displays **Starting upload**. |
| **Browse Files Link Text** | The label text for the link allows end-users to browse their computer for files. By default, the link text shows as **browse**. |
| **Drag & Drop Not Supported Message** | Text that displays when an end-user's browser doesn't support drag and drop. By default, the text shows as **File Drag/Drop is not supported for this browser**. |
| **Header for File Name Column** | The header label for the column lists the individual file names. By default, the header is **File**. |
| **Header for File Size Column** | The header label for the column listing the file sizes. By default, the header is **Size**. |

### Data Panel

[![A static image dispaying the File component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

| Setting | Description |
| --- | --- |
| Store Data in Database | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.** |

### Actions Panel

[![A static image dispaying the File component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

#### Triggers

| Setting | Description |
| --- | --- |
| **Post Upload** | Enter the **Property ID** of a component you'd like to trigger after the file uploads. |

### Validation Panel

[![A static image dispaying the File component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

### Advanced Panel

[![A static image dispaying the File component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

#### Additional Data Options

| Setting | Description |
| --- | --- |
| Compress .jpg and .png Files | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, uploaded images compress. This setting only supports .jpg and .png image formats. By default, this toggle is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**. |
| **Parse Excel Files with Multiple Tabs** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, all tabs of an uploaded multi-tab Excel file parse into a single JSON structure. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)**. |
| Parse Files on Upload | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**, the file’s data object updates to a cloud storage link, resolving the base64 string. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(OFF)****,** the file’s data object is a reference, with the file stored in the cloud the moment the submission is created. > [!TIP] > For this setting to function correctly, the Store Data in Database setting must be set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**. By default, this setting is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)**. |
| Parse Files Raw | This setting displays when Parse Files On Upload is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.** Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)** to disable auto date formatting on upload. This prevents > [!WARNING] > This setting only applies to the following file formats: .csv, .ods, .xls, .xlsx, .xlsm, .xlsb. |

#### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

#### Additional Validation Options

| Setting | Description |
| --- | --- |
| **Set Maximum Size** | Validation that limits the size of each file an end-user can upload. It might take longer to upload larger files depending on the browser and network connection. > [!NOTE] > This value must be equal to or less than your use case's file size limit. These thresholds are 18 MB, 100 MB, and 500 MB. To learn more about file size limitations, see our [Working With Files in Unqork](/v1/docs/working-with-files-in-unqork) article. |
| **File Size Helper Text** | A quick tip explaining the file size limits of your File component. |
| **File Size Error Message** | Custom error message that displays below uploaded files that exceed the maximum size. |

#### Accepted File Formats

| Setting | Description |
| --- | --- |
| **Set File Formats to Accept** | Sets the file types accepted by this component. To allow the upload of any file type, simply set the field value to *. To limit file types, list the approved file types by adding a comma between each value. For example, .jpg,.png,.gif. |

## Adding a File Component

As an example, let's create a basic File component configuration. This component will prompt the end-user to upload a PDF version of their resume.

1. In the Module Builder, drag and drop a File component onto the canvas.
2. In the Property ID field, enter **fileResume**.
3. In the Label Text field, enter `Your Resume`.
4. From the File component's configuration menu, click ![Validation Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_teal_icon(10).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Validation.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) **(ON)****.**

[![A static image displaying the File component's Validation Settings. The User Input "Required" setting is toggles On.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Steps_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Steps%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
6. From the File component's configuration menu, click ![Advanced Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) Advanced.
7. In the **Set File Formats to Accept** field, enter `.pdf`.

> [!NOTE]
> By entering .pdf in this field, the component only accepts PDF files from the end-user.

[![A static image displaying file component's advanced settings. The Set File Formats to Accept field is set to .pdf](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_Steps_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20Steps%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
8. Click **Save & Close**.
9. **Save** your module.

The File component looks like the following in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

## Data Structure of a File Component

The File component's data stores in submission data as an array of objects. In the example below, the **fileResume** **![File icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/file_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D) File** component displays the uploaded content in a table. Opening an object in the array displays a set of key/value pairs containing information about the file.

Here's how the File component looks in Express View:

[![A static image of the File component in Express View. A PDF has been uploaded and displays its filename in a table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_DataExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20DataExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

Here's how the same File component looks in the DevTools Console:

[![A static image displaying File component data in the DevTools Console view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/File%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)

## Resources

- [Modify the File component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [File Storage Component](/v1/docs/file-storage-component)
- [Plug-In Component](/v1/docs/plug-in-component)
- [Submission Data](/v1/docs/submission-data)

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format.

OS (operating system) is the program that manages other application programs on your computer.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

The DevTools Console helps you securely store, build, test, and deploy your software.