Upload

You might say

Let people upload their own images.

Send a file from a device to the websiteUploading includes choosing, transferring, and saving a file. Explain type, size, and count limits before selection, show progress during transfer, and allow retry after failure. The server still needs to check the file and the user's permission.

Know first

Form

⬆Click or drag the file hereSupports JPG / PNG, no more than 10MB

📄Design Draft-Homepage.fig

66%

Upload≠File

Upload handles choosing, transferring, and retrying a file. file displays a file that already exists or is being processed.

When to use it

Profile image
Document attachment
Import a data file
Send media or project files

When NOT to use it

Reveal limits only after a long upload fails
Show no progress for a large file
Trust the filename or browser check as final validation
Remove a failed file without offering a retry

Anatomy

⬆Supports JPG / PNG, no more than 10MB

📄Design draft.fig

A dashed area where users can drag files or click to select them

State file-format and size limits up front

One file per row; users can remove and retry it

Shows the file name

Clearly shows upload progress

Variants

Drag

⬆Drag the file hereor click to select

When uploading large files or selecting files in batches

Button

When space is limited, use a button to open the file picker

Picture

＋

When uploading an avatar or cover, the selected image needs to be displayed

List

📄Requirements document.pdf✓

📄Design draft.fig

66%

When uploading multiple files, show each file’s progress separately.

Typical use cases

Avatar upload

✎

Avatar

Supports JPG / PNG, no more than 2MB

Support attachment

Submit a work order

🖼Problem screenshot.png✓

📄Log file.log

66%

CSV import

Batch import members Download template

⬆Drag Excel / CSV hereor click to select the file, up to 500 rows at a time

Media library

I climbed Tanglang Mountain on the weekend and the sea of clouds was stunning 🌤