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

# ImageInput

> Selectarea imaginilor, previzualizarea și acțiunile de încărcare gestionate de apelant.

## Prezentare generală

`ImageInput` combină o previzualizare a imaginii, un selector nativ de fișiere și acțiuni de încărcare, eliminare sau anulare. `onFileSelect` se declanșează atunci când este selectat un fișier. Aplicația dvs. validează și încarcă fișierul, gestionează progresul și anularea încărcării și furnizează URL-ul previzualizării prin `src`.

**Light**

[Alege, previzualizează și elimină o imagine (light)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Alege, previzualizează și elimină o imagine (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-imageinput--display)

## Utilizare

```tsx theme={null}
import { useState } from 'react';
import { ImageInput } from 'twenty-ui/components/input';

export const WorkspaceImage = () => {
  const [preview, setPreview] = useState<{
    src?: string;
    reader?: FileReader;
  }>({});

  return (
    <ImageInput
      helperText="Choose a square image for your workspace."
      src={preview.src}
      onFileSelect={(file) => {
        const reader = new FileReader();
        setPreview((current) => ({ src: current.src, reader }));
        reader.onload = () => {
          setPreview((current) => {
            if (current.reader !== reader) {
              return current;
            }

            return { src: reader.result?.toString() };
          });
        };
        reader.readAsDataURL(file);
      }}
      onRemove={() => setPreview({})}
    />
  );
};
```

Exemplul păstrează previzualizarea curentă în timp ce citește un înlocuitor și ignoră citirile din selecțiile eliminate sau înlocuite.

## Selectare și previzualizare

Previzualizarea și butonul Încărcare deschid același selector nativ de fișiere. `onFileSelect` primește obiectul `File` selectat; acesta nu începe singur o încărcare. Anularea sau revenirea cu o selecție goală lasă imaginea curentă neschimbată. Câmpul de introducere a fișierului se golește după selecție, astfel încât același fișier poate fi selectat din nou, iar obiectul `File` din callback rămâne utilizabil.

Componentele Front acceptă selecția nativă și conținutul `File` ușor de citit. Fluxurile React și Preact construite cu SDK-ul sunt verificate în Chromium cu activare prin indicator, Enter și Space. Selectorul se deschide numai printr-un clic de încredere în interiorul componentei. URL-urile de obiect create de worker și atribuite unui `src` de imagine acceptă previzualizări.

`accept` are implicit valoarea `image/*` și filtrează selectorul de fișiere. Validați formatele, dimensiunile și mărimea permise în aplicația dvs. Acest selector bazat pe callback-uri nu reține un fișier pentru trimiterea nativă a formularului. Butoanele sale de acțiune folosesc `type="button"`, așa că nu trimit un formular înconjurător.

O imagine goală sau nereușită afișează un substituent. Modificarea `src` reîncearcă previzualizarea, inclusiv după ce încărcarea unei imagini anterioare a eșuat. Eliminarea apelează `onRemove`; actualizați `src` după ce aplicația dvs. elimină imaginea. Aplicația gestionează URL-urile locale de previzualizare și revocă URL-urile de obiect create de worker atunci când acestea nu mai sunt necesare. Rendererul gestionează curățarea URL-urilor de previzualizare ale gazdei sale.

## Proprietăți pentru rădăcină și câmpul de introducere a fișierului

`className`, `style` și `ref` se aplică div-ului rădăcină. Referința implicită a rădăcinii primește un `HTMLDivElement`; utilizați `inputRef` pentru câmpul ascuns de introducere a fișierului. Utilizați `render={<div ... />}` pentru a furniza atribute native ale rădăcinii sau gestionare de evenimente. Păstrați acea rădăcină ca neinteractivă, deoarece modulul conține deja butoane. `dir` se aplică atât rădăcinii, cât și câmpului de introducere a fișierului; utilizați `dir="rtl"` pentru aspectul de la dreapta la stânga.

Atributele native ale câmpului de introducere a fișierului sunt proprietăți de nivel superior, inclusiv `accept`, `capture`, `name`, `id`, `title`, `form`, `required`, atribute de accesibilitate, atribute de date și gestionare de evenimente. Acestea se aplică câmpului de introducere ascuns. `inputRef` primește `HTMLInputElement`-ul său. Controlul utilizează întotdeauna `type="file"`, acceptă un fișier și își resetează valoarea după fiecare selecție. `children`, `dangerouslySetInnerHTML`, `type`, `multiple`, `value`, `defaultValue` și `hidden` nu pot fi personalizate.

Validarea nativă `required` vede în continuare un câmp de introducere gol după selecție, deoarece câmpul se resetează. Validați încărcările finalizate în aplicația dvs.

`onChange` primește evenimentul nativ de modificare cât timp câmpul de introducere încă conține fișierul selectat. Câmpul de introducere se resetează apoi înainte de declanșarea `onFileSelect`. Proprietățile evenimentelor native urmează contractul de câmp de introducere al React. `onAbort` este acțiunea de anulare a încărcării.

## Stări de încărcare și dezactivare

`isUploading` marchează rădăcina ca ocupată și face indisponibile selectarea și eliminarea. Controalele care erau disponibile rămân focalizabile, astfel încât focalizarea de la tastatură să nu se piardă când începe o încărcare. Furnizați `onAbort` pentru a înlocui Încărcare cu Anulare în timpul unei încărcări. Anularea funcționează înainte de existența primului URL al imaginii. Aplicația gestionează anularea și setează `isUploading` înapoi la `false` când încărcarea se încheie.

`disabled` dezactivează fiecare acțiune. Selectarea necesită `onFileSelect`. Eliminarea necesită atât `onRemove`, cât și un `src` nevid.

**Light**

[Încărcare de imagine cu o acțiune de anulare (light)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--uploading\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Încărcare de imagine cu o acțiune de anulare (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--uploading\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-imageinput--uploading)

## Etichete, instrucțiuni și erori

Furnizați șiruri localizate pentru `uploadLabel`, `removeLabel` și `abortLabel`. Acestea au implicit valorile `Upload`, `Remove` și `Abort`. Eticheta de încărcare denumește și butonul de previzualizare, precum și câmpul ascuns de introducere a fișierului. Atributele native de accesibilitate pot furniza un nume diferit pentru câmpul de introducere a fișierului. `aria-describedby` descrie și butoanele de selecție și se combină cu textul ajutător și textul de eroare ale aplicației.

`helperText` și `errorMessage` aparțin aplicației. Ambele descriu controalele de selectare, iar erorile sunt anunțate ca alerte. Nu există limite de fișiere sau instrucțiuni de produs încorporate.

**Light**

[Intrare pentru imagine cu instrucțiuni și o eroare (light)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--with-error\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Intrare pentru imagine cu instrucțiuni și o eroare (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-imageinput--with-error\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-imageinput--with-error)

## Migrare

Înlocuiți `onUpload` cu `onFileSelect`. Păstrați `accept` ca proprietate de nivel superior. Callback-ul primește în continuare un `File`; păstrați codul existent de validare și încărcare în aplicația dvs.

```tsx theme={null}
import { ImageInput } from 'twenty-ui/components/input';

export const WorkspaceImageSelector = ({
  uploadImage,
}: {
  uploadImage: (file: File) => void;
}) => <ImageInput onFileSelect={uploadImage} accept="image/png, image/jpeg" />;
```

## Proprietăți

**abortLabel** `string` (default: Abort)

Label for the Abort action.

**accept** `string` (default: image/\*)

Native file picker filter. Defaults to image/\*. The caller validates allowed formats.

**aria-describedby** `string`

Accessible description references for the hidden file input and selection buttons, combined with helperText and errorMessage.

**aria-label** `string`

Accessible name of the hidden file input. Defaults to uploadLabel.

**aria-labelledby** `string`

Accessible name reference for the hidden file input.

**capture** `boolean | "user" | "environment"`

Native device capture hint for the file picker.

**className** `string`

Class applied to the root element.

**dir** `string`

Text direction applied to both the root and hidden file input.

**disabled** `boolean` (default: false)

Disables file selection, removal, and abort actions.

**errorMessage** `string | null`

Application error, displayed as an alert and associated with the selection controls.

**form** `string`

Native form identifier associated with the hidden file input.

**helperText** `string`

Application instructions, associated with the selection controls.

**id** `string`

Native identifier of the hidden file input.

**inputRef** `Ref\<HTMLInputElement\>`

Ref to the hidden single-file HTMLInputElement.

**isUploading** `boolean` (default: false)

Marks the module busy. Selection and removal controls that would otherwise be enabled stay focusable but unavailable. Shows Abort when onAbort is supplied.

**name** `string`

Native name of the hidden file input.

**onAbort** `(() =\> void)`

Shows an abort action while uploading. It can cancel the first upload before a src exists.

**onChange** `ChangeEventHandler\<HTMLInputElement, HTMLInputElement\>`

Native file input change event, fired while the selected file is present and before the input resets. The input does not retain a file for form submission.

**onFileSelect** `((file: File) =\> void)`

Fires when a file is selected and receives its usable File after the input resets. Empty and canceled selections do not call it. Selection is disabled when omitted. The caller owns validation and uploading.

**onRemove** `(() =\> void)`

Requests removal of the current image. Removal is disabled without this callback or a nonempty src.

**ref** `Ref\<HTMLDivElement\>`

Ref to the root div element.

**removeLabel** `string` (default: Remove)

Label for the Remove action.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Custom root element or render function. Supply root native attributes here and keep a non-interactive root.

**required** `boolean`

Native file input requirement. The input resets after selection, so the caller validates completed uploads.

**src** `string | null`

Resolved image URL. Empty or failed images show the image placeholder.

**style** `CSSProperties`

Inline style applied to the root element.

**title** `string`

Native title of the hidden file input.

**uploadLabel** `string` (default: Upload)

Label for the preview, Upload action, and hidden file input.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.