FileUpload

A complete file selection flow: dropzone, type and size checks, per-file upload progress, retry and remove.

When to use

• Attaching documents, images or data files to a record, message or import.
• When uploads run per file and you can report progress and support cancel.
• Not for a single avatar or logo crop flow; build that around an image editor.

Usage

import { FileUpload } from "@/components/iris/file-upload/file-upload";

h(FileUpload, {
  label: "Attach files",
  description: "PDF, CSV or images, up to 10 MB each.",
  accept: ".pdf,.csv,image/*",
  maxSize: 10 * 1024 * 1024,
  onUpload: (file, { onProgress, signal }) => uploadWithProgress(file, onProgress, signal),
});

Props

Prop	Type	Default	Description
accept	string	–	Extensions or MIME types, wildcards allowed (image/*). Mismatches stay listed with an error.
maxSize	number	–	Size limit in bytes. Larger files stay listed with an error.
multiple	boolean	true	When false, a new file replaces the existing one.
disabled	boolean	false	Disables the dropzone and input.
label	string	"Upload files"	Dropzone heading.
description	string	"Drop files here or browse from your device."	Helper text, linked to the dropzone.
value	{ id; file: File; error? }[]	–	Controlled file list.
onChange	(files) => void	–	Files added or removed.
onUpload	(file, { onProgress, signal }) => Promise<void>	–	Runs once per valid file. Report 0–100, resolve when done, reject to mark failed. Removing a file aborts its signal.

Notes

• Uploads start only for files added through the dropzone or picker; files passed in through value show as ready.
• Keyboard: the dropzone is a native button, so Enter or Space opens the picker; Tab reaches each row's retry and remove buttons. After a removal, focus moves to a neighbouring remove button or back to the dropzone.
• A polite live region announces added, rejected, uploaded, failed and removed files; retry and remove labels include the file name.
• Reduced motion makes progress jump and turns height and blur transitions into fades.