File Upload
A drop zone with a file picker fallback, reporting the selected files back to you.
Click to upload or drag and dropPNG or JPG, up to 5MB
It selects, it doesn't upload
This component hands you File objects and stops there. Sending them, tracking progress, and retrying failures are your app's job. Size and type limits in hint are text, not enforcement: validate in onFilesChange too.
Restricting types
Click to upload or drag and dropPNG or JPG only
Multiple files
Click to upload or drag and dropDrop as many exports as you like
Reading the selection
Click to upload or drag and dropAttachments
No files selected yet.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| accept | string | Accepted types, passed straight to the input's accept attribute. | |
| multiple | boolean | false | Allows selecting more than one file. |
| hint | string | Hint line under the main label, for size or format limits. | |
| onFilesChange | (files: File[]) => void | Fires whenever the selected list changes, with the full list rather than a diff. |
Why it works this way
Why
- Click to choose and drag-and-drop both work, with a list of selected files each removable, so people can correct a mistake before sending.
Don't
- Don't use it for a single profile photo. Use AvatarUpload.