File upload
File upload is the control that moves a file off the reader's device: a target to drop on or a button that opens the system picker, then a row per file reporting what became of it. The six blocks work through that arc, from a dropzone stating its limits before the drop and an avatar well with Replace and Remove, to a manager where one stored file has failed and can be retried, a form field with a preview grid, a row playing its own progress, and a batch row speaking for everything in flight.
Drag and drop is decoration. The file input underneath is the control, and it has to stay reachable, because nobody on a phone, a keyboard or a screen reader drags anything. The other half of the work is failure. Choosing a file is not uploading one, and a dropped connection, a file over the ceiling and a type the server refuses are ordinary outcomes. Each needs a retry that does not send the person back through their file system to find it again.
Dropzone
Best for
Attaching files to a form: the zone, the live rows and the quota in one card
Anatomy
Dashed target that lights on drag · limits stated before the drop · a done row and a live one · Clear / Save footer
Upload / add attachments
Drag files in or pick from your device.
File summary.xls
524 KB/12.8 MB
Upload failed: the connection dropped.
Avatar uploader
Best for
Profile and onboarding forms: one image with Replace and Remove, over a single-file zone
Anatomy
88px photo well · Upload / Replace / Remove · a second compact zone for a CV · its own limits
Profile photo
PNG or JPG, square works best. Max 5 MB.
Resume / CV
Single PDF or DOCX, up to 10 MB.
Attachments manager
Best for
Files already uploaded: a row each, one of them failed and retryable
Anatomy
Header with a count pill · a row per file with its own state and actions · confirm before delete · Add files footer
Project files
Documents shared with this workspace.
Upload field
Best for
A form that collects images: the zone and everything already attached, in one field
Anatomy
Field Header Label with required star · hint line · the drop zone · a grid of previews, each with replace and remove · Footer Hint Text
Uploading file
Best for
The transport itself: one row playing its own progress, pause and failure, with the controls to drive it
Anatomy
Type mark · name and bytes-of-total · its own bar · percent and state badge · pause, resume, retry, cancel, delete · the controls wrap to a second line when the row narrows
File summary
0 KB/12.8 MB
Upload failed: the connection dropped.
Batch upload
Best for
A whole batch on one row: a status bar for everything in flight, not one file
Anatomy
100px row · title, percent and state · a wash filling the row behind the content · a 6px bar along the bottom edge · pause, cancel, more, and a delete once it is done
Uploading 3 files
0%Queued
Using File upload
Reach for it when
- Attaching documents to a form that is submitted as a whole
- A single image that replaces whatever is currently there
- Transfers long enough that pause, resume or cancel are worth having
- A queue where several files each need their own state and their own retry
Reach for something else when
- A short piece of text somebody would otherwise paste: a text area saves them a trip through their file system
- Choosing something already stored in the product. That is a file browser, not an upload
- Structured data that needs column mapping: the upload is one step of an import flow, and alone it strands the person
Where it shows up
Support ticket attachments
A form where screenshots and logs go up beside the description. The limits sit next to the zone before anything is dropped, so an oversized file is refused with an explanation rather than a silent nothing.
Profile photo
A single image replacing whatever is there now, with Replace and Remove as explicit actions. The well shows the current photo, which makes it plain that uploading is a replacement and not an addition.
Bulk media import
A batch going up together, reported as one row with a percentage and a bar for everything in flight, plus controls that pause or cancel the whole batch rather than picking through it a file at a time.
Document collection
Identity or compliance paperwork gathered across several fields, each with its own required mark and hint line, and a preview grid so the person can confirm they sent the right page.
Questions
Does a drag-and-drop upload zone need a click fallback?
Yes. Dragging is unavailable on touch screens, awkward with a keyboard and invisible to a screen reader, so the drop zone should be a label wrapping a real file input: focusable, activatable with Enter or Space, and opening the system file picker when it is. Treat the drop target as an accelerator for pointer users rather than as the control itself.
Should file size and type be validated in the browser or on the server?
Both, for different reasons. The browser check exists to tell someone immediately that a file is too large or the wrong type, before any bytes are sent over their connection. The server check is the one that actually enforces the rule, because anything the client decides can be bypassed. State the limits next to the drop zone too, so the check is rarely reached at all.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPFile upload
File upload is the control that moves a file off the reader's device: a target to drop on or a button that opens the system picker, then a row per file reporting what became of it. The six blocks work through that arc, from a dropzone stating its limits before the drop and an avatar well with Replace and Remove, to a manager where one stored file has failed and can be retried, a form field with a preview grid, a row playing its own progress, and a batch row speaking for everything in flight.
Drag and drop is decoration. The file input underneath is the control, and it has to stay reachable, because nobody on a phone, a keyboard or a screen reader drags anything. The other half of the work is failure. Choosing a file is not uploading one, and a dropped connection, a file over the ceiling and a type the server refuses are ordinary outcomes. Each needs a retry that does not send the person back through their file system to find it again.
Dropzone
Best for
Attaching files to a form: the zone, the live rows and the quota in one card
Anatomy
Dashed target that lights on drag · limits stated before the drop · a done row and a live one · Clear / Save footer
Upload / add attachments
Drag files in or pick from your device.
File summary.xls
524 KB/12.8 MB
Upload failed: the connection dropped.
Avatar uploader
Best for
Profile and onboarding forms: one image with Replace and Remove, over a single-file zone
Anatomy
88px photo well · Upload / Replace / Remove · a second compact zone for a CV · its own limits
Profile photo
PNG or JPG, square works best. Max 5 MB.
Resume / CV
Single PDF or DOCX, up to 10 MB.
Attachments manager
Best for
Files already uploaded: a row each, one of them failed and retryable
Anatomy
Header with a count pill · a row per file with its own state and actions · confirm before delete · Add files footer
Project files
Documents shared with this workspace.
Upload field
Best for
A form that collects images: the zone and everything already attached, in one field
Anatomy
Field Header Label with required star · hint line · the drop zone · a grid of previews, each with replace and remove · Footer Hint Text
Uploading file
Best for
The transport itself: one row playing its own progress, pause and failure, with the controls to drive it
Anatomy
Type mark · name and bytes-of-total · its own bar · percent and state badge · pause, resume, retry, cancel, delete · the controls wrap to a second line when the row narrows
File summary
0 KB/12.8 MB
Upload failed: the connection dropped.
Batch upload
Best for
A whole batch on one row: a status bar for everything in flight, not one file
Anatomy
100px row · title, percent and state · a wash filling the row behind the content · a 6px bar along the bottom edge · pause, cancel, more, and a delete once it is done
Uploading 3 files
0%Queued
Using File upload
Reach for it when
- Attaching documents to a form that is submitted as a whole
- A single image that replaces whatever is currently there
- Transfers long enough that pause, resume or cancel are worth having
- A queue where several files each need their own state and their own retry
Reach for something else when
- A short piece of text somebody would otherwise paste: a text area saves them a trip through their file system
- Choosing something already stored in the product. That is a file browser, not an upload
- Structured data that needs column mapping: the upload is one step of an import flow, and alone it strands the person
Where it shows up
Support ticket attachments
A form where screenshots and logs go up beside the description. The limits sit next to the zone before anything is dropped, so an oversized file is refused with an explanation rather than a silent nothing.
Profile photo
A single image replacing whatever is there now, with Replace and Remove as explicit actions. The well shows the current photo, which makes it plain that uploading is a replacement and not an addition.
Bulk media import
A batch going up together, reported as one row with a percentage and a bar for everything in flight, plus controls that pause or cancel the whole batch rather than picking through it a file at a time.
Document collection
Identity or compliance paperwork gathered across several fields, each with its own required mark and hint line, and a preview grid so the person can confirm they sent the right page.
Questions
Does a drag-and-drop upload zone need a click fallback?
Yes. Dragging is unavailable on touch screens, awkward with a keyboard and invisible to a screen reader, so the drop zone should be a label wrapping a real file input: focusable, activatable with Enter or Space, and opening the system file picker when it is. Treat the drop target as an accelerator for pointer users rather than as the control itself.
Should file size and type be validated in the browser or on the server?
Both, for different reasons. The browser check exists to tell someone immediately that a file is too large or the wrong type, before any bytes are sent over their connection. The server check is the one that actually enforces the rule, because anything the client decides can be bypassed. State the limits next to the drop zone too, so the check is rarely reached at all.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
