Carbon Design System: File uploader
Documents upload button and drop-zone text, uploaded filename display, loading, success, uploaded, invalid states, file removal, focus return after file dialog, keyboard activation, and per-file or whole-uploader error guidance.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Drag-and-drop upload | Choose drag-and-drop upload when dropping files from a desktop file manager is a common, useful shortcut. | Dragenter and dragover make the target visibly active only when the incoming data includes files. | Carbon supports drag-and-drop uploader variant guidance, drop-zone copy, active border changes, click fallback, keyboard activation, focus return, selected files, removal, and invalid states. |
| File upload | Choose file upload when the original file itself is needed, not just information from the file. | Activating the choose-file button opens the platform file picker and returns focus to the invoking control or selected file summary afterward. | Carbon supports selected filename display, loading, success, uploaded, invalid states, removal, focus return, keyboard activation, and drop-zone boundaries. |
Comparisons supported by this source
- Drag-and-drop upload vs file upload vs multi-step form vs text input
Carbon distinguishes file uploader and drag-and-drop file uploader variants and documents drop-zone text, activated borders, keyboard activation, focus return, uploaded filenames, removal, loading, and invalid states.
- File upload vs text input vs single-question page vs multi-step form
Carbon supports button/drop-zone wording, selected filename display, loading, success, uploaded, invalid states, removal, keyboard activation, and focus return.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: IBM. Last checked: .