File Upload

<FileUploadaccept="image/*,.pdf"multiplemaxSize={5 * 1024 * 1024}description="PNG, JPG or PDF up to 5 MB."onFiles={upload}/>

FileUpload is a drop zone and a button, always both: drag and drop is undiscoverable on its own and impossible on a phone. The whole zone is a <label> for a hidden file input — one element, keyboard-focusable, and the click path needs no JavaScript at all.

Usage

import { FileUpload } from "@heyo-sh/heyo-ui";<FileUpload accept="image/*" multiple onFiles={upload} />;

onFiles receives everything accepted, from both the drop and the picker, after accept and maxSize have had their say.

The file list

Hand it files and it renders the list: name, size, a progress bar while the upload runs, an error when it fails, and a remove control wired to onRemove. Leave files out and render the list yourself.

<FileUploadmultiplefiles={[  { id: "1", name: "architecture.pdf", size: 184320, status: "done" },  { id: "2", name: "screenshot.png", size: 98304, progress: 46, status: "uploading" },  { id: "3", name: "notes.txt", size: 2048, status: "error", error: "Unsupported type" },]}onRemove={cancel}/>

A file with no progress draws no bar: undefined means "not tracking progress", which is different from zero.

Copy that says what is accepted

label is the headline inside the zone and description is the line beneath it. Put the formats and the size limit in the description — a rejection after the fact is a worse experience than a sentence before it.

<FileUploadicon={IconCloudUpload}label="Drop a certificate"description="PEM or PKCS#12, up to 1 MB."accept=".pem,.p12"maxSize={1024 * 1024}/>

formatBytes

The same helper the file list uses, exported so your own rows read identically.

import { formatBytes } from "@heyo-sh/heyo-ui";formatBytes(184320); // "180 KB"

Properties

UploadedFile