File Upload
文件上传区
Aliases:拖文件进去上传拖拽上传框选文件的地方dropzone
What is it
A form region for selecting files, checking constraints and managing a pending list. It may use a native picker or a drop zone, but drag-and-drop must have a picker alternative. Selection is not upload completion: distinguish pending, processing, success and failure, and explain accepted types and size limits.
Interactive playground
Try it. Make an informed choice.Choose or drop a PNG, JPG or PDF, try an unsupported type, then remove a selected file.
Loading lab…
What to look for
- 01Picker and drop share constraints; a rejection preserves previous files.
- 02Do not label a selected file as uploaded; this demo sends no upload request.
✓ When to use
- Select user images, attachments or PDFs.
- Review and remove individual files in a batch.
✕ When not to use
- Use a text field when only a URL is needed.
- Do not auto-upload without explaining the purpose and destination.
Variants
Drop zone
拖放区域
Support both dropping files and a file picker.
Picker button
按钮选择
Use a native picker in a compact layout.
Implementation
border-style: dashed:focus-visibleoverflow: hiddenRetain a native file input. The accept attribute is a picker hint; validate size and type and verify uploads on the server. Prevent the browser from navigating to dropped files. Explain constraints in errors. This demo only lists local selections.
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsSimilarAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsSimilar