On this page
Overview
Show code, UploadFiles.tsx
Variants
In a form
The files upload while people fill in the rest. A send waits for any still going up, then goes with them.
Show code, AttachInForm.tsx
Anatomy
Drop zone
File list
File
Remove
Progress
Show code, FileUploadAnatomy.tsx
Behaviour
Progress for each file
Each file uploads as soon as it is added, in its own row of a list under the drop zone.
- A bar shows what has been sent while it goes up.
- Each file uploads, fails and is tried again on its own.
- Once the file is up, the bar gives way to its size.
- A line under the list counts the files that are up and those that failed.
Rejected files
A file of the wrong kind or too large never joins the list. The zone says which file and why, and takes the others.
Show code, TurnedAway.tsx
Failed uploads
The file keeps its row, with what went wrong and Try again, which starts it over. The other files go on uploading.
Show code, FailedUpload.tsx
Removing files
Remove takes the file out of the list at once and stops its upload, and a toast offers Undo, as destructive actions describe.
Show code, RemoveWithUndo.tsx
Rules
People can keep adding files while others upload, and see each one's state in its row.
Use it when
- Several files that upload as soon as they are added
- Attachments to a form, sent once they are up
Show code, ZoneStaysReady.tsx
Show code, ZoneBusyWhileUploading.tsx
Names
Show each file by the name people gave it, which is how they find it in the list, and keep its row where it is as its upload goes from start to end.
Content
Say which files fit before people choose, and what went wrong in words.
- "PDF or images, up to 10 MB each" under the zone's label
- "budget-2026.xlsx is larger than 10 MB."
- "Couldn't upload. Check your connection and try again."
- "annual-review.pdf removed.", with Undo
Accessibility
Focus and keyboard
Tab goes from the zone to each row's actions in turn, and each bar names its file.
- The line under the list announces each outcome rather than every step of an upload.
- An action that leaves as it is pressed moves focus on: from Try again to Remove in the same row.
- From Remove, focus moves to the next row.