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%

Quick checkChoose the best answer

People can upload avatars up to 20 MB, and a network interruption must be recoverable. Which flow is most complete?

Check the format in the browser and then treat the file as safeExplain limits before selection, show progress, and allow retry after failureAccept every file first and report an invalid size only after transfer

You can say this to an AI Agent

Improve avatar upload: state the allowed formats and 20 MB limit before selection, show progress, allow retry, and validate again on the server before saving. Test an oversized file, a successful upload, and a network interruption.

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
⬆ Drag files here, or click to choose
Document attachment
🖼🖼＋
Import a data file
📄 Requirements.docx✓
📄 Design.fig66%
Send media or project files
⬆ Click or drag to upload
JPG and PNG supported, up to 10 MB each

When NOT to use it

Reveal limits only after a long upload fails
Video URL⬆ Upload
If people only have a URL, a text field is enough
Show no progress for a large file
🖼 IMG_001.jpg12 / 38
Uploading many small files one by one takes time and makes progress hard to manage
Trust the filename or browser check as final validation
📄 Video footage.mp4✕ Failed
Without a retry option, people must upload again after failure
Remove a failed file without offering a retry
🎬 Final cut-4K.mp4 (1.8 GB)99%
The size limit isn’t reported until the upload reaches 99%

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 🌤

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.