# Image picker

## Overview

A field for image selection and upload. The component supports a number of image appearance options, fitting types, multi-file upload, required field, and maximum size validation. You can choose a direct file upload or upload via URL.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FQM0WxsoLAdXJyCoiaFc9%2FCleanShot%202025-08-04%20at%2016.04.34%402x-min.png?alt=media&#x26;token=8945c23e-6be6-4e23-ad01-2dfb5ece87aa" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="135.9296875">Name</th><th width="199.234375">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>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>

### Methods

<table><thead><tr><th width="155.28125">Name</th><th width="173.6953125">Parameters</th><th width="100.56640625">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="133.4609375">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 Enter</strong></td><td>Triggered when the Enter key is pressed</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

To activate multi-file upload, select the *Multiple* checkbox in component's settings. \
Once selected, the *Append files* option will appear which is enabled by default. 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%2FCT6xV8NxlUstZaG76OGH%2FCleanShot%202025-03-17%20at%2015.02.06%402x-min.png?alt=media&#x26;token=978dac7a-9ee3-46c1-ab1a-a271fd87c85d" alt=""><figcaption></figcaption></figure>