Upload is a system of states — drag feedback, honest progress, error recovery, preview, and queue — not a bare file input.
A dropzone has to answer back the moment a file hovers over it. Border, glow, and copy shift give three signals before the drop, so users never hesitate over a dead zone.
A spinner hides the truth. Show percent complete and time remaining so the user can decide to wait or walk away.
When an upload dies at 90%, never make them start over. Inline retry keeps the file loaded and resumes in one tap.
A filename is not feedback. Show the thumbnail, type, and size as visual proof you received the right file.
In a multi-file queue, each item gets its own progress and its own retry — one failure never blocks the other nine.
Do / Don't
Do: React to drag-over with a border, glow, and copy change before the drop
Do: Show percent complete and estimated time remaining during upload
Do: Offer inline retry that keeps the file loaded so one tap resumes
Don't: Rely on a spinner that hides how far along the upload really is
Don't: Force users to re-select and start over after a failed upload
Don't: Treat a bare filename as confirmation the right file arrived
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
