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
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.
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 uploadJPG and PNG supported, up to 10 MB each
When NOT to use it
- Reveal limits only after a long upload failsVideo URL⬆ UploadIf people only have a URL, a text field is enough
- Show no progress for a large file🖼 IMG_001.jpg12 / 38Uploading 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✕ FailedWithout 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
📄✓
📄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
🖼✓
📄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 🌤
+
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check