# File dropzone

## Overview

A drag-and-drop field for selecting and uploading files. The component supports file type restrictions, multiple file selection, validation for required fields, and minimum/maximum size.\
File dropzone can also parse text-based files like JSON, CSV, and Excel spreadsheets. You can configure the maximum size for uploaded files.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fau8HqHEgtAOvhzrk8WKS%2FCleanShot%202025-07-29%20at%2013.30.41%402x-min.png?alt=media&#x26;token=c6caa564-c777-4565-a8aa-62031369e93a" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="149.33984375">Name</th><th width="198.3515625">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>value</code></td><td><code>string | File | Blob</code></td><td>Current component value</td></tr><tr><td><code>parsedValue</code></td><td><code>any</code></td><td>Parsed file content (available only if the <em>Parse file</em> setting is enabled)</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Indicates if the component is valid</td></tr><tr><td><code>validating</code></td><td><code>boolean</code></td><td>Indicates if the component is validating</td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Indicates whether the component is disabled</td></tr></tbody></table>

{% hint style="info" %}
The component's `parsedValue` property allows you to access *CSV/JSON* file content as an array of objects without uploading files to the server or parsing them separately. You can use it as `{{ui.fileDropZone.parsedValue}}` in code action steps or directly in other components.
{% endhint %}

### Methods

<table><thead><tr><th width="157.4765625">Name</th><th width="174.1953125">Parameters</th><th width="98.48828125">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setValue</code></td><td><p><code>value: string |</code> </p><p><code>File | Blob</code></p></td><td><code>void</code></td><td>Set component value</td></tr><tr><td><code>setDisabled</code></td><td><code>disabled: boolean</code></td><td><code>void</code></td><td>Disable or enable the component</td></tr><tr><td><code>reset</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>focus</code></td><td>–</td><td><code>void</code></td><td>Set focus on the component</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr><tr><td><code>setErrors</code></td><td><p><code>errors: string |</code> </p><p><code>string[] | null</code></p></td><td><code>void</code></td><td>Mark the component as invalid and display errors</td></tr><tr><td><code>setRequired</code></td><td><code>required: boolean</code></td><td><code>void</code></td><td>Set component required state</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="128.67578125">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Change</strong></td><td>Triggered when the component's state changes</td></tr><tr><td><strong>On Focus</strong></td><td>Triggered when the component is in focus</td></tr><tr><td><strong>On Blur</strong></td><td>Triggered when the component loses focus</td></tr><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>

## Working with the component

### Multi-file upload & Append files settings

The component allows you to upload multiple files - you just need to select the *Multiple* checkbox in component's settings.\
Once selected, the *Append files* option will appear. It allows you to add new files without replacing the existing ones.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F9P1uRU9uOxZmA6CaSxVE%2FCleanShot%202025-07-29%20at%2014.32.29%402x-min.png?alt=media&#x26;token=9bb4d8df-f67f-4024-ae91-fcf5b856f3dc" alt=""><figcaption></figcaption></figure>