File Upload
Accessible file upload zone covering: drag-drop + click browse, max size + accept validation, progress + status per file, controlled/uncontrolled, full a11y.
Live Preview
Interact with the FileUpload component in real time. Toggle multiple, max files, and disabled to see behavior update.
Drop files anywhere in the dashed area.
1<FileUpload2 value={items}3 onChange={setItems}4 multiple={true}5 maxFiles={3}6 helperText="Drop files anywhere in the dashed area."7/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the FileUpload component into your file.
import { FileUpload } from '@/components/aidash/file-upload';Basic Usage
Single-file upload restricted to images, with controlled state.
PNG or JPG, up to a few MB.
1const [items, setItems] = useState<FileUploadItem[]>([]);2 3<FileUpload4 value={items}5 onChange={setItems}6 accept="image/*"7 label="Profile photo"8 helperText="PNG or JPG, up to a few MB."9/>Multiple Files
Accept multiple files at once and cap the total count with `maxFiles`.
Up to 5 files.
1<FileUpload2 value={items}3 onChange={setItems}4 multiple5 maxFiles={5}6 label="Attachments"7 helperText="Up to 5 files."8/>With Size Limit
Reject files larger than `maxSize` and surface the rejection via `onError`.
Max 1 MB per file.
1const [items, setItems] = useState<FileUploadItem[]>([]);2const [error, setError] = useState<string | null>(null);3 4<FileUpload5 value={items}6 onChange={setItems}7 onError={(message) => setError(message)}8 maxSize={1024 * 1024}9 multiple10 label="Documents"11 helperText="Max 1 MB per file."12/>Sizes
Three size presets to fit different layouts.
1<FileUpload size="sm" label="Small" />2<FileUpload size="md" label="Medium" />3<FileUpload size="lg" label="Large" />States
Visual states mirror the Input component: default, success, warning, and error.
Neutral state.
Upload complete.
Large file detected.
Something went wrong.
1<FileUpload state="default" label="Default" />2<FileUpload state="success" label="Success" />3<FileUpload state="warning" label="Warning" />4<FileUpload state="error" label="Error" />Disabled State
Disabled dropzones are dimmed, non-interactive, and skipped by drag-and-drop handling.
1<FileUpload disabled label="Uploads temporarily unavailable" />Accessibility
Built-in ARIA wiring so the component is usable by keyboard and screen reader.
role="button" dropzone
The dropzone is a real <button> with role="button" and a descriptive aria-label that reflects the current constraints.
aria-live status region
A visually hidden aria-live="polite" region announces "N files added" or "Removed <file>" so screen readers hear the outcome.
Keyboard support: Space / Enter
Tab focuses the dropzone; pressing Space or Enter opens the native file picker. Focus is visualized with afocus-visible outline.
Per-file remove label
Each remove button carries an aria-label="Remove <file>" so assistive tech announces which file the action targets.
1{/* Rendered dropzone (simplified) */}2<button3 type="button"4 role="button"5 aria-label="Upload files. Click, press Enter or Space, or drop files here."6 aria-describedby="file-upload-status-... file-upload-helper-..."7>8 ...9</button>10 11{/* Status region */}12<span role="status" aria-live="polite">3 files added</span>13 14{/* Per-item remove */}15<button aria-label="Remove resume.pdf">×</button>API Reference
Complete list of props for the FileUpload component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | FileUploadItem[] | — | Controlled list of files. Omit for uncontrolled behavior. |
| onChange | (items: FileUploadItem[]) => void | — | Called whenever the list changes (add / remove). |
| onError | (message: string, file?: File) => void | — | Called for every rejected file (size / type / count). |
| multiple | boolean | false | Allow selecting multiple files at once. |
| accept | string | — | Comma-separated MIME types or extensions, e.g. `image/*,.pdf`. |
| maxSize | number | — | Maximum size per file, in bytes. |
| maxFiles | number | — | Maximum number of files that can be selected. |
| disabled | boolean | false | Disable all interaction and dim the dropzone. |
| size | 'sm' | 'md' | 'lg' | 'md' | Dropzone size preset. |
| state | 'default' | 'success' | 'warning' | 'error' | 'default' | Visual state for the dropzone border and text. |
| label | string | — | Optional field label rendered above the dropzone. |
| helperText | string | — | Helper text rendered below the dropzone. |
| hideFileList | boolean | false | Suppress the built-in file list so the caller can render their own. |
| className | string | '' | Additional classes appended to the root wrapper. |
progress and status via onChange.Related
Other components that work well alongside File Upload.