Key insights
- 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
