FileDropzone

A drop target and file picker with a file list that can run uploads with progress, retry and removal.

When to use

• Attaching or uploading files: mail attachments, receipts, notes and images.
• When you need per-file progress and failure reasons; pass onUpload and the rows track it.
• Use listPlacement="inside" with compactAt for single-file or space-tight forms.

Usage

import { FileDropzone } from "@/components/iris/file-dropzone/file-dropzone";
h(FileDropzone, {
  label: "Attach to the reply",
  accept: ".pdf,.md,image/*",
  maxFiles: 5,
  maxSize: 10 * 1024 * 1024,
  onUpload: async (item, { onProgress, signal }) => {
    await uploadFile(item.file, { onProgress, signal }); // your uploader
  },
});

Props

Prop	Type	Default	Description
accept	string	–	Accepted types, as the native accept attribute. Others are rejected with an error.
multiple	boolean	true	Allow several files.
maxFiles	number	5	Most files the list holds.
maxSize	number	–	Bytes; larger files fail with a size reason and never upload.
onFilesChange	(files: File[]) => void	–	Called with the selected File objects whenever the list changes.
onUpload	(item, { onProgress, signal }) => Promise<void>	–	Uploads each added file; report 0–100, resolve on success, reject with an Error for the row's reason.
defaultItems	FileDropzoneItem[]	–	Rows present at mount: { id, name, size, status?, progress?, error?, retryable?, preview? }.
label / description	string	"Add files" / "Drop files here or choose from your device"	Prompt copy.
note	string	accepted types or file limit	Small line under the description.
dropLabel	string	derived	Label while files hover over the target.
listPlacement	"below" | "inside"	"below"	Render the list under the target or inside its edge.
compactAt	number	–	Once the list holds this many files, the prompt folds to a slim bar.

Notes

• The whole target is one button that opens the file picker; rows support arrow-key focus movement, and status changes are announced in a polite live region. Paste is accepted while the zone is hovered or focused.
• Retry buttons only appear when onUpload is set and the row is retryable. Removing a row aborts its upload signal. Thumbnails for added images are object URLs, revoked on removal.
• The dashed edge is an SVG stroke fitted to the perimeter; dragging adds a pointer-following glow. Reduced motion removes the shake, glow travel and row entrances.
• Reads --surface, --hover, --line, --line-strong, --accent, --red, --green, --radius-surface, --radius-panel, --radius-button. Rows hide the type icon below 300px of list width and Retry keeps only its icon below 440px.