File Drop
Forms · FileDrop
Dashed drop zone plus an upload list with progress. Click, Enter or drop to add files.
Props: files/onChange (controlled list of {id, name, size, progress}), title, hint, accept, multiple (default true).
- The zone turns mint while a file is held over it, so people know the drop will land.
- Each row shows percent while uploading and size when done; the trailing button cancels, then removes.
- Say what is accepted in the hint (types, size). Reject the rest with an inline Alert, not a toast.
Drop files here or browsePDF, PNG or JPG up to 10 MB · drag several at once
Receipt-April-Hetzner.pdf180 KB · uploaded
Team-offsite-photos.zip46% · 23 MB
Props
FileDrop
| Prop | Type | Notes |
|---|---|---|
files? | UploadFile[] | |
onChange? | (f: UploadFile[]) => void | |
title? | string | |
hint? | string | |
accept? | string | |
multiple? | boolean | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |