File Upload
A drop zone for adding files by dragging or browsing, with a row per file that shows its name, size and progress until it is done.
Preview
Drag files here, or
PDF, JPG, PNG or SVG, up to 10 MB
- brand-guidelines.pdfDone
2.4 MB
When to use
- For attachments, imports and media, where people often have the file open in another window.
- When several files go up at once and each needs its own progress and its own way to cancel.
Anatomy
- 1
Drop zone
A dashed box with an icon, a line of instruction and the allowed types and size.
- 2
Browse button
Opens the system file picker, for people who do not drag.
- 3
File row
Icon, name, size and a remove or cancel button.
- 4
Progress bar
Thin bar under the name, with a percentage.
States
Idle
Dashed border, neutral.
Drag over
Border and wash turn the brand colour.
Uploading
The file row fills its bar.
Complete
A tick replaces the percentage.
Error
The row turns red with the reason and a retry.
Accessibility
- The browse action is a real <button> wired to an <input type="file">; dragging is never the only way.
- Allowed types and size limit are written out, not only enforced.
- Progress uses role="progressbar" with aria-valuenow, and completion or failure is announced.
- Each remove button is named for its file: Remove report.pdf.
Source
The File Upload is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block