File drop
canonThe one surface for choosing a file: drop zone with a glyph, label, accepted formats, upload progress and an inline error.
Owner approved v2 on 3 Oct 2026 (acrm !4548): replaced Import .drop, the identity image .idimg-pick and the Documents step-1 zone. Import on dev = approved design, 0 px difference (1440 and 390). Canon since 4 Oct 2026: also used by step 1 of the Documents form-less dialog (acrm !4574), checked on dev at 1440 and 390.
Used in 3 files · 3 areas · 3× — components/IdentityImageDialog, components/evidence, pages/ImportPage
Import
import { FileDrop } from '@acrm/ui'Props
FileDrop packages/ui/src/components/FileDrop.tsx
| Name | Type | Default | Description |
|---|---|---|---|
onFile * | (file: File) => void | — | Vybraný nebo puštěný soubor, který prošel accept a maxSize. Bere se jen první. |
label * | ReactNode | — | Jedno sloveso + co („Přetáhněte sken nebo vyberte soubor"). Žádná vysvětlivka. |
formats * | ReactNode | — | Tichý druhý řádek: formáty a strop („PDF, JPG, PNG do 20 MB"). Čtečka ho čte jako popis. |
accept | string | — | Totéž co <input accept>; zároveň se podle něj odmítne puštěný soubor. |
maxSize | number | — | Strop velikosti v bajtech; větší soubor se odmítne inline chybou tooLargeText. |
wrongTypeText | string | — | Text chyby pro soubor mimo accept. |
tooLargeText | string | — | Text chyby pro soubor nad maxSize. |
error | ReactNode | — | Chyba od hostitele (selhalo nahrání). Má přednost před vlastním odmítnutím. |
uploading | { label: ReactNode; value?: number | null | undefined; ariaLabel: string; } | null | — | Nahrává se: místo slov a formátů průběh v ploše (<Progress>), plocha nereaguje. |
disabled | boolean | — | Plocha nereaguje (hostitel pracuje a stav hlásí jinde, např. hlavička dialogu). |
media | ReactNode | — | Místo ikony vlastní náhled (logo, fotka) — plocha je pak náhled i cíl zároveň. |
icon | string | 'upload' | Ikona v klidu (DS sada); výchozí upload. |
inputRef | Ref<HTMLInputElement> | — | Skrytý <input type=file> — pro druhou cestu k témuž výběru (tlačítko v patičce). |
className | string | — | — |
CSS classes
.acrm-filedrop-wrap.acrm-filedrop.fd-ic.fd-label.fd-formats.fd-prog.fd-err