File upload
A file upload lets people add files from their device, by clicking to browse or by dropping files onto an area.
- Also called
- file uploader, drop zone, dropzone
- Platforms
- Web
- In the gallery
- 50 web designs
File uploads from the Kombai gallery: a contract marketplace's CV step, a rental listing's photo upload and a call-analysis tool's recordings page.
What is a file upload?
A file upload is a control for sending files from a device to a product: a CV, a CSV export, a photo or a recording. Most pair a Choose files button with a dashed area people can drop files onto, and list each file with its size and progress once it is picked.
- Accepted formats and the size limit are written inside or under the area.
- Picked files show as rows or chips that people can remove.
File uploads show up across settings, forms, dialog and media editor screens.
When to use a file upload
- DocumentsCVs, receipts, contracts and PDFs a service needs to keep or read.
- ImportsCSV or spreadsheet exports that fill a table or a contact list.
- MediaPhotos, videos and recordings for listings, posts and lessons.
When not to use one
- Information you could ask forAsk a question instead of asking for a document that holds the answer.
- Short textIf people would paste a few lines, give them a text area.
- Files you already haveLet people reuse an earlier upload instead of finding it again.
Anatomy of a file upload
This one works. Drop a file on the area or choose one, then watch it upload. Files over 4 MB or in other formats show an error.
Drag files here, or
PDF, PNG or JPG, up to 4 MB each
- site-survey.pdf1.2 MBUploaded
- Idle
- Drag over
- Uploading
- Error
- Drop zoneDrop files here
- Browse buttonA real file input
- LimitsFormats and size
- File rowName, size, progress
- Remove buttonTakes a file back out
- StatesIdle, drag over, uploading, error
File upload variants
We sorted every file upload design in the Kombai gallery and found five patterns. Browse all 50 web designs.
1. Dashed drop zones
The default. A large dashed box with an upload icon, a browse link and the limits, often inside an import dialog.
2. Drop zones with a file list
Picked files stack under the zone as rows or chips, with a name, a size and a remove button.
3. Button-only uploads
A single Choose files or Upload file button, for settings and panels with no room for a drop zone.
4. Avatar uploaders
A circle with a camera icon or an Add a photo label, for profile pictures and logos.
5. Uploads with other sources
Upload sits beside other ways in: a URL, stock images, preset art or a connected app.
Where file uploads show up
Data imports
A CSV or spreadsheet step in an import wizard, often with a template to download first.
Attachments in forms
Screenshots on a feedback form, a receipt on a transaction or photos on an update.
Media for posts and listings
A header video for a lesson, an image in an article or product photos with a size hint.
Files to process
Recordings to transcribe, PDFs to pull fields from and storage buckets waiting for their first files.
File upload vs similar components
Build notes
- Build it on a real <input type="file">, with a visible label or button people can click and tab to.
- To style it, hide the input with opacity, not display: none, so assistive technology still treats it as interactive.
- Treat dropping as an extra. WCAG 2.2 asks for a way to do anything a drag does without dragging.
- Use accept to steer the file browser, like accept=".csv", and still check the type on the server.
- Write the formats and the size limit before people choose, and repeat the limit in the error.
- Show each file with its name, size and progress, and a button to remove it.
FAQ
Should a file upload support drag and drop?
On desktop, yes, as an extra. A large, always visible drop zone is easy to aim at. Keep a Choose files button next to it, because some people cannot drag, and WCAG 2.2 asks for a way that works without dragging.
What should a file upload error say?
Exactly what is wrong and how to fix it, like "The selected file must be smaller than 2MB", "The selected file must be a CSV" or "The selected file is empty". Show the error on the file it belongs to, and keep the other files.
Should files upload as soon as they are picked?
For attachments and photos, yes, with progress on each file so people can keep filling the form. For imports that change data, like a CSV of contacts, upload first and show a preview or a column mapping step before anything is saved.
How do I let people take a photo instead of picking a file?
Set accept="image/*" and capture="environment" on the file input to ask for the outward-facing camera, or capture="user" for the front one. If that camera is not available, the browser may use its default instead.
Related terms
All glossary terms · Browse 50 web file upload designs