← →

File Dropzone

`<pura-file-dropzone>` is a dashed region that highlights on dragover, opens the native file picker on click or Enter/Space, and shows each chosen file as a chip with its name, human-readable size, and a remove button. Use it in upload forms when you want an accessible experience built on a hidden `<input type="file">`. It has an agent-native layer: stable `data-*` attributes on the host and on each chip, plus a global `window.__puraFileDropzones` registry that maps each instance's id to a live `{ files }` snapshot, letting agents inspect the state without touching the shadow DOM.

Preview

<pura-file-dropzone
  id="dz"
  label="Drop files here or click to browse"
  accept="image/*,.pdf"
  multiple>
</pura-file-dropzone>
<p id="dz-status">No files selected.</p>
<script type="module">
  import "/pura/lib/file-dropzone.js";
  const dz = document.getElementById("dz");
  const status = document.getElementById("dz-status");
  dz.addEventListener("change", (e) => {
    const files = e.detail.files;
    status.textContent = files.length
      ? `${files.length} file(s): ` + files.map((f) => f.name).join(", ")
      : "No files selected.";
  });
  // Public API: dz.files (snapshot) and dz.clear()
</script>

Attributes

Attribute	Type	Default	Description
`accept`	string	—	Passed through to the native input to filter file types (e.g. "image/*,.pdf").
`multiple`	boolean	false	Allows selecting more than one file; without it, each new selection replaces the previous one.
`disabled`	boolean	false	Blocks click, keyboard, and drop, and hides the chips' remove button.
`label`	string	Drop files here or click to browse	Visible instruction text and aria-label of the zone.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/file-dropzone.js"></script>

JavaScript

import "./pura/lib/file-dropzone.js";

Events

change