File Upload
Mobile-first file picker with type validation and multi-file support
import { FileUpload } from "@plexui/ui/components/FileUpload";Examples
Overview
With files
- government-id-scan.pdf2.1 MB
- passport-photo.png340 KB
- non-citizen-travel-2026-approved-document.pdf1.5 MB
Error state
- government-id-scan.pdf2.1 MB
Please upload at least 2 documents.
Disabled
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "compact" | "area" | "compact" | Visual variant — compact button or larger tappable area |
label | string | — | Button label text |
description | string | — | Helper text below the icon (area variant only) |
accept | string | — | Accepted file types (e.g. ".pdf,.png,image/*") |
multiple | boolean | false | Allow selecting multiple files |
maxFiles | number | — | Maximum number of files. Button disables at limit. |
maxSize | number | — | Maximum file size in bytes |
value | File[] | — | Controlled file list |
onValueChange | (files: File[]) => void | — | Callback when files are added or removed |
onFileReject | (file: File, reason: string) => void | — | Callback when a file is rejected (wrong type, too large, over limit) |
errorMessage | string | — | Error message — sets invalid visual state |
invalid | boolean | false | Invalid state (auto-set when errorMessage is provided) |
disabled | boolean | false | Disable all interactions |