FileUpload
A keyboard-accessible, transport-agnostic file picker and dropzone.
Default
Click, press Enter, or drop a file into the target.
Drop files here or choose filesAny file type
tsx
<FileUpload />Installation
tsx
import { FileUpload } from "madagent";Controlled files
Drop files here or choose filesAny file type
tsx
const [files, setFiles] = useState([]);
<FileUpload multiple value={files} onChange={setFiles} />Validation
Limit type, file size in bytes, and the number of accepted files.
Drop files here or choose filesAccepted: image/png,image/jpeg · Up to 5.0 MB
tsx
<FileUpload
accept="image/png,image/jpeg"
multiple
maxFiles={5}
maxSize={5 * 1024 * 1024}
/>Application-owned progress
Drop files here or choose filesAny file type
- quarterly-report.pdf6 B · uploading
tsx
<FileUpload value={[{
id: "report",
file,
progress: 68,
status: "uploading",
}]} />Custom dropzone content
Import ERP recordsChoose or drop a CSV export
tsx
<FileUpload accept=".csv">
<strong>Import ERP records</strong>
<span>Choose or drop a CSV export</span>
</FileUpload>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
accept | string | - | Comma-separated MIME types, wildcards, or extensions |
multiple | boolean | false | Allows more than one file |
maxSize | number | - | Maximum size per file in bytes |
maxFiles | number | - | Maximum accepted file count |
value | UploadFile[] | - | Controlled file list, including application-owned progress/status |
onChange | (files: UploadFile[]) => void | - | Called when files are added or removed |
onReject | (rejections: FileRejection[]) => void | - | Reports size, type, and count failures |
disabled | boolean | false | Disables the picker and drop target |
children | ReactNode | - | Custom dropzone content |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
ارفع الملفاتاسحب الملفات هنا أو اخترها
Usage
tsx
<FileUpload multiple>
<strong>ارفع الملفات</strong>
<span>اسحب الملفات هنا أو اخترها</span>
</FileUpload>