Dropzone

Glass file drop target — click or drag to pick files. Host apps own accept types, copy, and what happens after selection.

Preview

Live

No file selected. 

<div class="dropzone glass-focus-surface" data-dropzone>
  <input type="file" class="dropzone__input" tabindex="-1" />
  <button type="button" class="dropzone__trigger">
    <span class="dropzone__icon" aria-hidden="true">
      <span class="ui-icon ui-icon--upload"></span>
    </span>
    <span class="dropzone__title">Drop a file here</span>
    <span class="dropzone__hint">Or click to browse</span>
  </button>
</div>

States

Idle

Default dashed glass target.

Drag over

.is-drag-over — solid accent rim.

Busy

.is-busy — blocks interaction.

Uploading… This may take a moment

Loaded

.is-loaded — file accepted.

document.pdf Ready

Accessibility

  • Keep the file input in the DOM (visually hidden). The trigger button opens it — keyboard users reach the trigger, not a clipped input.
  • Host apps own title, hint, busy, and replace strings (i18n). Do not hardcode copy in the React wrapper.
  • Set aria-busy while busy; put progress copy in a role="status" region with aria-live="polite".
  • Announce the selected file name after drop or browse (live region or loaded title).

API

HTML classes

Class Description
.dropzone Root target — compose with .glass-focus-surface.
.is-drag-over Active while a file is dragged over the zone.
.is-busy Upload / processing in progress.
.is-loaded File accepted; drag/drop typically disabled.
.dropzone__trigger Idle click target that opens the file picker.
.dropzone__icon / .dropzone__title / .dropzone__hint Idle / status content chrome.
.dropzone__status Centered busy or loaded panel.

React props

From src/core/Dropzone.tsx — root applies dropzone glass-focus-surface.

Prop Type Default Description
accept string — Forwarded to the hidden file input.
multiple boolean false Allow multiple files.
busy boolean false Adds .is-busy; blocks drag/drop.
loaded boolean false Adds .is-loaded; blocks drag/drop.
onFiles (files: File[]) => void — Fired after browse or drop.
children ReactNode — Idle / busy / loaded slots (host-owned).