UI components · Form input
Upload
Also called: File upload, Image upload, Drag-and-drop upload, Dropzone, Uploader
A control for choosing files or images from a computer or phone and sending them to the server, by clicking a button or dragging files in.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstUse a drag-and-drop upload area for "Attachments": a dashed-border box with an upload icon and "Click or drag files here" in the middle, and small gray text below that says "PDF or Word, up to 10MB each, max 5 files." Darken the border when a file is dragged over it. After upload, list each file below with its name, a progress bar, and a delete button, and show a retry option for failed ones.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Upload is what you need.
Use Upload when
- Forms that need attachments, ID photos, scanned contracts, or other files
- Images like avatars or product photos, where users need to see a thumbnail preview right away
- Uploading several files or large files at once, where users need to see each file's progress and result
Pick something else when
When users only need to paste an image or file URL. A regular input is enough.
Use insteadImageWhen users need to write and insert images while laying out a page. Use the image feature built into a rich text editor.
Use insteadImageBulk importing thousands of spreadsheet rows that need row-by-row validation. Build a dedicated step-by-step import flow.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Not stating format and size limits up front, so users only see "File too large" after uploading
- 02
No progress or status during upload, so users can't tell if it's stuck or done
- 03
Not showing a thumbnail after an image uploads, so users can't confirm they picked the right one
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A button or drop zone that triggers file selection, text describing the limits, and a list of uploaded files. Each item has the file name, progress, and action buttons.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Upload components come in three common forms: an "Upload file" Button that opens the system file picker; a drop zone with a dashed border that says "Click or drag files here to upload"; and an image wall, a row of square tiles that each show a thumbnail, with a "+" as the last tile. After files are chosen, a list below shows each file name, a progress bar, success or failure status, and delete or re-upload buttons.
Spell out the limits in your requirements: allowed file types (say, only jpg and png), max size per file, and max number of files. Show these in small gray text before users choose files, not after an upload fails. Avatar uploads often open a crop box after an image is picked. Large files should show real progress and allow canceling.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-upload- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
input[type="file"].ant-upload-wrapper.ant-upload-drag.el-upload.arco-upload.t-upload.n-upload
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026