ImageInput

Panoramica

ImageInput combina un’anteprima dell’immagine, un selettore di file nativo e azioni di caricamento, rimozione o annullamento. onFileSelect viene attivato quando viene selezionato un file. L’applicazione convalida e carica il file, gestisce l’avanzamento e l’annullamento del caricamento e fornisce l’URL dell’anteprima tramite src.

Utilizzo

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({})}
    />
  );
};

L’esempio mantiene l’anteprima corrente durante la lettura di un elemento sostitutivo e ignora le letture provenienti da selezioni rimosse o sostituite.

Selezione e anteprima

L’anteprima e il pulsante Carica aprono lo stesso selettore di file nativo. onFileSelect riceve il File selezionato; non avvia autonomamente un caricamento. L’annullamento o la restituzione di una selezione vuota lascia invariata l’immagine corrente. L’input file viene svuotato dopo la selezione, quindi è possibile selezionare nuovamente lo stesso file e il File del callback resta utilizzabile. I componenti Front supportano la selezione nativa e contenuti File leggibili. I flussi React e Preact creati con l’SDK sono verificati in Chromium con attivazione tramite puntatore, Invio e Spazio. Il selettore si apre solo da un clic attendibile all’interno del componente. Gli URL degli oggetti creati dal worker e assegnati a un’immagine src supportano le anteprime. accept è impostato per impostazione predefinita su image/* e filtra il selettore di file. Convalida formati, dimensioni e dimensione consentiti nell’applicazione. Questo selettore basato su callback non conserva un file per l’invio nativo del modulo. I relativi pulsanti di azione usano type="button", quindi non inviano un modulo circostante. Un’immagine vuota o non riuscita mostra un segnaposto. La modifica di src riprova l’anteprima, anche dopo che un’immagine precedente non è stata caricata. La rimozione chiama onRemove; aggiorna src dopo che l’applicazione rimuove l’immagine. L’applicazione gestisce gli URL delle anteprime locali e revoca gli URL oggetto creati dal worker quando non sono più necessari. Il renderer gestisce la pulizia dei propri URL delle anteprime host.

Proprietà dell’elemento radice e dell’input file

className, style e ref si applicano al div radice. Il ref radice predefinito riceve un HTMLDivElement; utilizza inputRef per l’input file nascosto. Utilizza render={<div ... />} per fornire attributi radice nativi o gestori di eventi. Mantieni l’elemento radice non interattivo, poiché il modulo contiene già pulsanti. dir si applica sia all’elemento radice sia all’input file; utilizza dir="rtl" per il layout da destra a sinistra. Gli attributi nativi dell’input file sono proprietà di primo livello, tra cui accept, capture, name, id, title, form, required, attributi accessibili, attributi dati e gestori di eventi. Si applicano all’input nascosto. inputRef riceve il proprio HTMLInputElement. Il controllo utilizza sempre type="file", accetta un file e reimposta il proprio valore dopo ogni selezione. children, dangerouslySetInnerHTML, type, multiple, value, defaultValue e hidden non possono essere personalizzati. La convalida nativa di required rileva comunque un input vuoto dopo la selezione, poiché l’input viene reimpostato. Convalida i caricamenti completati nella tua applicazione. onChange riceve l’evento di modifica nativo mentre l’input contiene ancora il file selezionato. L’input viene quindi reimpostato prima che venga attivato onFileSelect. Le proprietà degli eventi nativi seguono il contratto degli input di React. onAbort è l’azione di annullamento del caricamento.

Stati di caricamento e disabilitato

isUploading contrassegna la radice come occupata e rende selezione e rimozione non disponibili. I controlli che erano disponibili restano attivabili tramite focus, quindi il focus della tastiera non va perso quando inizia un caricamento. Fornisci onAbort per sostituire Carica con Annulla durante un caricamento. Annulla funziona prima che esista il primo URL dell’immagine. L’applicazione gestisce l’annullamento e reimposta isUploading su false al termine del caricamento. disabled disabilita ogni azione. La selezione richiede onFileSelect. La rimozione richiede sia onRemove sia un src non vuoto.

Etichette, istruzioni ed errori

Fornisci stringhe localizzate per uploadLabel, removeLabel e abortLabel. Per impostazione predefinita sono Upload, Remove e Abort. L’etichetta di caricamento assegna un nome anche al pulsante di anteprima e all’input file nascosto. Gli attributi nativi accessibili possono fornire un nome diverso all’input file. aria-describedby descrive anche i pulsanti di selezione e si combina con il testo di supporto e di errore dell’applicazione. helperText e errorMessage appartengono all’applicazione. Entrambi descrivono i controlli di selezione e gli errori vengono annunciati come avvisi. Non sono presenti limiti integrati per i file né istruzioni sul prodotto.

Migrazione

Sostituisci onUpload con onFileSelect. Mantieni accept come proprietà di primo livello. Il callback riceve ancora un File; mantieni nell’applicazione il codice di convalida e caricamento esistente.

import { ImageInput } from 'twenty-ui/components/input';

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

Props

string

predefinito:"Abort"

Label for the Abort action.

string

predefinito:"image/*"

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

string

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

string

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

string

Accessible name reference for the hidden file input.

boolean | "user" | "environment"

Native device capture hint for the file picker.

string

Class applied to the root element.

string

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

boolean

predefinito:"false"

Disables file selection, removal, and abort actions.

string | null

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

string

Native form identifier associated with the hidden file input.

string

Application instructions, associated with the selection controls.

string

Native identifier of the hidden file input.

Ref<HTMLInputElement>

Ref to the hidden single-file HTMLInputElement.

boolean

predefinito:"false"

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

string

Native name of the hidden file input.

(() => void)

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

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.

((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.

(() => void)

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

Ref<HTMLDivElement>

Ref to the root div element.

string

predefinito:"Remove"

Label for the Remove action.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

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

boolean

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

string | null

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

CSSProperties

Inline style applied to the root element.

string

Native title of the hidden file input.

string

predefinito:"Upload"

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

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Selezione e anteprima

Proprietà dell’elemento radice e dell’input file

Stati di caricamento e disabilitato

Etichette, istruzioni ed errori

Migrazione

Props

​Panoramica

​Utilizzo

​Selezione e anteprima

​Proprietà dell’elemento radice e dell’input file

​Stati di caricamento e disabilitato

​Etichette, istruzioni ed errori

​Migrazione

​Props

Panoramica

Utilizzo

Selezione e anteprima

Proprietà dell’elemento radice e dell’input file

Stati di caricamento e disabilitato

Etichette, istruzioni ed errori

Migrazione

Props