File Upload
文件上传
Lets the user get a file from their device into your app, with progress, cancellation, and retry along the way.
Live Demo
Actually clickableClick to choose, or drag a file here
JPG / PNG · Up to 10MB each
What you just saw:Picking an image in a chat app, importing photos from a gallery app, the "Upload avatar" box in an admin panel, the dashed drop zone in a web form.
What it actually is
The real difficulty of file upload lives in the "uploading" and "failed" states. Success is visible by itself; failure is routinely ignored. A competent upload control needs progress, cancellation, retry on failure, and a clear statement of format and size limits.
Anatomy · What it's made of
Drop Zone拖拽区
Dashed border, supports both click and drop
File List文件列表
Thumbnail + name + size
Progress上传进度
A progress bar plus a percentage
Cancel / Retry取消/重试
Cancelable while running, retryable after a failure
Constraint限制说明
Format, size, and count limits
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| You need to receive images, documents, or media files | Yes |
| Both drag-and-drop and click-to-pick should work | Yes |
| Large files need visible progress and a way to cancel | Yes |
| Only one image is needed (avatar, cover) | Depends |
On mobile, request photo and file permissions up front — and when permission is denied, explain why and link to Settings.
Always state the format and size limits before the upload starts, never after the user has waited five minutes.
Similar Patterns
Don't mix these upFile UploadCurrent
文件上传
Lets the user get a file from their device into your app, with progress, cancellation, and retry along the way.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
In one line:Lets the user get a file from their device into your app, with progress, cancellation, and retry along the way.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
File Upload
文件上传
Lets the user get a file from their device into your app, with progress, cancellation, and retry along the way.
Avatar
头像
A small round image that stands in for a person or an entity.
How to tell AI
Three levels of promptAdd the component name and specifics
Add an image upload zone: supports click and drag, accepts jpg/png only, caps each file at 10MB, and shows a thumbnail and progress bar per file with cancel and retry.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add an upload button for files.
Say this instead
Add a file upload zone: supports click and drag, accept limits the format, size is validated on the client, each file shows a thumbnail + progress bar + cancel button, failures can be retried, and the format and size limits are stated up front.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.