i

File uploader

Entering · researched

Controls for choosing or dragging files to upload and seeing each file status.

molecule · also called File upload, File input, Drop zone

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Upload native: partly antd 6.6.5
Variants
—
Sizes
—
States documented
default, disabled, error, loading
Accessibility guidance
no

Renders a hidden native input type=file (rc-upload) behind a trigger; list item status values error/done/uploading/removed. Supports drag, paste and directory upload.

1 corrected on re-read
  • builds_on_native: "yes" → "partly" SSR: <input type=file style=display:none> inside span/div wrappers; visible trigger is caller-supplied, so native input is hidden

docs ↗ · code ↗

Carbon

File uploader native: yes @carbon/react 1.117.0
Variants
File uploader, Drag and drop file uploader
Sizes
small, medium, large
States documented
error, loading
Accessibility guidance
yes

Source renders a hidden native input type=file driven by a button (and a drop container for drag and drop). Docs name loading, success and uploaded states for each file item.

2 corrected on re-read
  • states_documented: ["loading"] → ["error","loading"] Loading states (loading, success, uploaded) and invalid/error file states are documented
  • urls: {"docs_url":"https://carbondesignsystem.com/components/file-uploader/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FileUploader"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/file-uploader/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FileUploader"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

File upload native: yes govuk-frontend 6.5.1
Variants
default, improved (javascript: true)
Sizes
—
States documented
default, disabled, error
Accessibility guidance
no

Native input type=file in both modes; an optional JavaScript-enhanced version (the javascript option) wraps it with a button and drop area.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No file-upload component and no mention in the roadmap; the text field's supported type list does not include file.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No file upload component in the component index, Internal Components list, or src/ tree.

Spectrum

Drop zone contested native: partly
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L
States documented
default, hover
Accessibility guidance
no

The design site only documents a Drop zone (drag target with an optional button); choosing a file is done with React Aria FileTrigger, re-exported from S2 exports/FileTrigger.ts, which renders a hidden input type=file and has no spectrum.adobe.com page. Sizes and states from the rsp page; DropZone is a div (S2 and SWC 2nd-gen); the SWC 1st-gen sp-dropzone README has an Accessibility section but the rsp page does not.

docs ↗ · code ↗

USWDS

File input native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default, error, disabled
Accessibility guidance
yes

Template renders input type=file, which the JS wraps with a drop target; docs say it does not support asynchronous uploading.

1 corrected on re-read
  • states_documented: ["default","error"] → ["default","error","disabled"] Docs demo 'Input has an error'; twig/stories and scss support disabled

docs ↗ · code ↗

Platform facts

Native elementinput type=fileSpec/MDN attributes: accept (comma-separated hint: audio/*, video/*, image/*, MIME types or .extensions), capture (user or environment), multiple, webkitdirectory (File and Directory Entries API, MDN). MDN: value cannot be set from script; filename shown with C:\fakepath\ prefix; a cancel event fires when the picker closes without change. Spec: input and change events fire when the selection updates.
Baseline—
APG patternnone
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. label — label element; plain term.
  2. file input — input type=file; spec: represents a list of selected files, each with a filename, type and body. Activation shows the picker.
  3. selected file list optional — Spec: the list of selected files; browsers show filename(s). MDN: files exposed via the files property (name, size, type, lastModified).
  4. drop zone optional — Spec: the user agent should allow adding or removing files by drag-and-drop 'if the element is mutable'; no named drop-zone part in HTML.

The seven states

default No file selected.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Inference: focusable like other form controls; the sources read do not state which keys open the picker (spec: activation behavior shows the picker).
active n/a — No distinct state defined.
disabled disabled attribute; spec: not mutable so the user agent must not allow changing the selection.
error Spec: required with an empty file list is a missing-value failure; accept is only a hint to the browser, so type errors are the author's.
loading n/a — Not defined by HTML; upload progress is an author concern (progress element is the nearest native part).

Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.