Components
FileUpload
Click-or-drag dropzone that validates and hands selected files to your upload logic.
FileUpload is a dropzone (built on react-dropzone) where users click or drag
files in; the accepted File[] is passed to onFiles for you to upload. It is
transport-free — you own the actual upload and progress UI (pair it with
FileItem). Restrict input with accept,
maxFiles, maxSize/minSize, and surface guidance with label and hint;
rejections and errors are reported via onDropRejected and onError.
Example
Preview
Click or drag files to upload
import { FileUpload } from '@officina/ui';
function AvatarUpload() {
return (
<FileUpload
label="Drop an image or click to browse"
hint="PNG or JPG, up to 5 MB"
accept={{ 'image/*': ['.png', '.jpg', '.jpeg'] }}
maxFiles={1}
maxSize={5 * 1024 * 1024}
onFiles={(files) => console.log('upload', files)}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onFiles* | (files: File[]) => void | — | |
| accept | Accept | — | |
| activeLabel | string | Drop files here... | |
| ariaLabel | string | File upload area | |
| disabled | boolean | — | |
| getFilesFromEvent | (event: DropEvent) => Promise<(File | DataTransferItem)[]> | — | |
| hint | string | — | |
| invalid | boolean | — | Marks the field invalid for validation styling and `aria-invalid`. |
| label | string | Click or drag files to upload | |
| maxFiles | number | — | |
| maxSize | number | — | |
| minSize | number | — | |
| name | string | — | Form field name, applied to the underlying file input. |
| noClick | boolean | — | |
| noDrag | boolean | — | |
| noDragEventsBubbling | boolean | — | |
| noKeyboard | boolean | — | |
| onDropAccepted | <T extends File>(files: T[], event: DropEvent) => void | — | |
| onDropRejected | (fileRejections: FileRejection[], event: DropEvent) => void | — | |
| onError | (err: Error) => void | — | |
| onFileDialogCancel | () => void | — | |
| onFileDialogOpen | () => void | — | |
| preventDropOnDocument | boolean | — | |
| required | boolean | — | Marks the underlying file input as required for native form validation. |
| useFsAccessApi | boolean | — | |
| validator | <T extends File>(file: T) => FileError | readonly FileError[] | null | — |