File Upload
Button-triggered file input and its drag-and-drop sibling, Dropzone. Both keep a removable file list once files are selected.
Button-triggered
Dropzone
Drag-and-drop target with a click-to-browse fallback.
Drag and drop files here, or click to browse
- Dropzone falls back to a native file picker on click for keyboard and touch users
Dropzone label
label is the drop target's accessible name; description is the prose shown inside it.
PNG or JPG, up to 5 MB
- label defaults to "Upload files" - give each Dropzone its own when a page has more than one
- The file list is a named live region, so a completed drop is announced
When to use
- FileUpload: a compact, button-triggered picker inside a form (profile photo, attachment, document).
- Dropzone: a larger, drag-and-drop-first target where the upload is the primary action on the page or panel.
When not to use
- Very large file counts or resumable/chunked uploads - both components handle file selection and a local list, not upload transport; wire your own upload logic to onChange.
Keyboard
Mobile behavior
- Drag-and-drop has no equivalent on touch, so Dropzone always renders a real, tappable file input underneath - touch users tap to open the native file picker instead of dragging.
- FileUpload is a standard button + native input on every viewport.
Accessibility notes
- Both wrap a real <input type="file"> under the hood, so they inherit native file-picker accessibility (OS dialog, screen reader file-count announcements) rather than reimplementing it.
- Each selected file's remove control has an accessible name identifying that specific file.
- Dropzone is named by its label ("Upload files" unless set), never by its description prose, and its file list is a named live region.
Common mistakes
- Relying on drag-and-drop as the only way to add a file - Dropzone's click-to-browse fallback exists specifically so keyboard and touch users aren't blocked; don't hide or disable it.
- Not validating accept/file size server-side - the accept attribute is a UI hint only, not a security boundary.
Known limitations
- No built-in upload progress, chunking, or retry - these are local file-selection components, not an upload client.
Related components
FileUpload / Dropzone props
Controlled selected files.
Uncontrolled initial files.
Native accept attribute, e.g. "image/*".
Allows selecting more than one file.
Disables the trigger/drop target.
API reference
Forwarded to the native input: a comma-separated list of extensions or MIME types.
Extra classes merged onto the wrapper.
Starting files when uncontrolled.
Disables the trigger and the underlying input.
Text on the trigger button.
Allows more than one file, and appends each pick to the list rather than replacing it.
Called with the whole list after a pick or a removal, never with the delta.
Controlled list of picked files. Pair with `onChange`; omit for uncontrolled.
Dropzone props
Forwarded to the native input: a comma-separated list of extensions or MIME types.
Extra classes merged onto the drop target.
Starting files when uncontrolled.
Prose inside the target ("PNG or JPG, up to 5 MB"). Not the accessible name - see `label`.
Disables the drop target and its input.
Accessible name for the drop target and its file list. Defaults to "Upload files"; set it when a page has several Dropzones so they are distinguishable ("Upload avatar").
Allows more than one file, and appends each drop to the list rather than replacing it.
Called with the whole list after a drop, a pick or a removal.
Controlled list of accepted files. Pair with `onChange`; omit for uncontrolled.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent