File Upload
The control for getting a file from a person's machine into a product — and the place where most products lose the work silently.
UI ComponentsUpload is a long, failure-prone operation that most interfaces treat as a click. It needs the full set of states: idle, selected, uploading with real progress, processing (which is not uploading and often takes longer), success, and failure with a retry that does not require reselecting the file. Missing the last one is the single most common defect — a failed upload that clears the field and says nothing.
Constraints belong before the picker, not after the failure. Accepted types, maximum size and how many files can go at once should be visible next to the control, and the picker should filter to those types. Drag-and-drop is a welcome addition and never a replacement: it is unusable by keyboard, awkward on touch, and impossible for many users to discover.
Validate on the client, enforce on the server
Client-side checks save people a two-minute wait for a rejection. They do not secure anything. Type and size must be re-checked server-side regardless of what the input accepted.
In practice
A KYC flow accepted documents up to 10MB but only said so in the error after the upload finished. Modern phone photos routinely exceed that. Roughly a third of first attempts failed, and about half of those users abandoned. Stating the limit up front and compressing images client-side before upload cut first-attempt failures to under 4%.
Where teams get it wrong
- Failure that clears the selection, so the user starts over.
- Fake progress bars that animate regardless of the actual transfer.
- Size and type limits revealed only in the error message.
- Drag-and-drop as the only affordance, with no keyboard-reachable file input.
- No distinction between uploading and processing, so a long server step looks like a hang.
Learn more
You may ask
Frequently Asked Questions
What states does a file upload component need?
Idle, file selected, uploading with genuine progress, processing, success, and failure with retry that keeps the selected file. Products usually ship the first three and lose users on the last.
Should file upload use drag and drop?
As an addition, never as the only option. Drag-and-drop is unreachable by keyboard and awkward on touch, so a visible button opening the native picker has to be there too.
Related terms
All terms- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
- Progress BarA determinate indicator showing how much of a known task is done — usable only when the total is actually known.
- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us