Components/Inputs
File Upload
File upload lets people attach documents or images by dropping them on an area or browsing their device, then shows each file’s progress in its own card
Playground
Playground
Pick a variant, or drop a real file on the area to watch it upload. Nothing leaves your browser
Upload area
Upload area
Large stacks an icon, instructions and a button for a page with room. Small fits the drop target in one row inside a form
File card
File card sizes
Each picked file gets a card. Large and Medium show a status line, Small shows the name only for dense lists
File card
File card states
A file moves from Ready to Upload through Loading to Finish, or to Failed. View is the card after the upload, while the file is processed or reviewed
Usage
When to use
Use when
- People attach documents or images to a form, like an ID scan or a receipt
- People need to see each file’s progress and fix a failed upload without starting over
- The flow accepts several files and people should review the list before they submit
Avoid when
- People pick from files already in the product, use a Dropdown or a list instead
- The input is a short link or a code, use a Text Input
- The upload runs in the background with no file to review, show a Progress Bar
Guidance
Do and don’t
Say which file types and sizes are accepted in the caption, and keep each file’s status in its own card
Don’t disable the area without saying why, use the caption to explain, for example that the file limit is reached
Specs