File Upload

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { FileUpload, FileUploadItem, FileUploadList } from "@tessinaui/ui";

{/* Single file */}
<FileUpload onValueChange={(files) => console.log(files)} />

{/* Multiple files */}
<FileUpload multiple maxFiles={5} />

{/* Restrict to images, 5 MB max */}
<FileUpload accept="image/*" maxSize={5 * 1024 * 1024} />

{/* Custom title / description / button */}
<FileUpload
  title="Front of your ID document"
  description="Drag and drop a file less than 5MB"
  actionLabel="Or select file"
/>

{/* Variants */}
<FileUpload variant="card" />
<FileUpload variant="dashed" />
<FileUpload variant="filled" />
<FileUpload variant="minimal" />

{/* Intents */}
<FileUpload intent="error" />
<FileUpload intent="success" />

{/* States */}
<FileUpload loading />
<FileUpload disabled />
<FileUpload skeleton />

{/* Controlled */}
<FileUpload value={files} onValueChange={setFiles} />

{/* Rejected file callback */}
<FileUpload
  maxSize={1024 * 1024}
  onFileRejected={(r) => alert(r.message)}
/>

Examples

Default

A single-file drop-zone with the default dashed variant.

Variants

Four visual styles — card, dashed, filled, and minimal.

Sizes

Padding and typography scale from sm through lg.

Intents

Colour intents tint the filled drop-zone for error, warning, success, and info.

States

Loading, disabled, and skeleton placeholder states.

File item states

Each list entry reflects its idle, uploading, success, or error status.

Variants

Props

<FileUpload>

<FileUploadItem>

UploadedFile

{
  id:        string;
  file:      File;
  name:      string;
  size:      number;
  type:      string;
  preview?:  string;            // object URL for images
  progress?: number;            // 0–100
  status?:   "idle" | "uploading" | "success" | "error";
  error?:    string;
}

File item states

The status of each entry in the list drives its appearance:

• idle — file picked but no upload started; name + size + remove button
• uploading — animated progress bar, percentage, and a spinner instead of the remove button
• success — green check + "Uploaded"; remove still allowed
• error — red alert + error message; retry button appears when onRetry is provided

Validation

FileUpload validates each incoming file against accept and maxSize. Rejected files don't enter the list — they fire onFileRejected with a { file, reason, message } payload where reason is one of:

• "type" — extension or MIME type didn't match accept
• "size" — file is larger than maxSize
• "max-files" — adding would exceed maxFiles

Accessibility

• The drop-zone is a role="button" with tabIndex={0} and a meaningful aria-label
• Enter / Space opens the native file picker
• Each item exposes aria-label="Remove file" / "Retry upload" on its action buttons
• Object URLs created for image previews are revoked on unmount and on file removal