FileItem

FileItem renders a single file row with its name, size, a progress bar, and a status ('idle' | 'uploading' | 'success' | 'error') that drives the icon and styling. It is transport-free — the parent owns the upload state and passes progress, plus onRemove and onRetry callbacks. Pair it with FileUpload to list files as they upload.

Example

Preview

brand-guidelines.pdf

2.3 MB

hero-image.png

820 KB

export.csv

12 KB

Upload failed — file too large

import { FileItem } from '@officina/ui';

function UploadRow() {
  return (
    <>
      <FileItem name="report.pdf" size={2_400_000} status="success" onRemove={() => {}} />
      <FileItem name="hero.png" size={840_000} status="uploading" progress={62} />
      <FileItem
        name="export.csv"
        size={12_000}
        status="error"
        error="Upload failed — file too large"
        onRetry={() => {}}
        onRemove={() => {}}
      />
    </>
  );
}

API

Prop	Type	Default	Description
name*	string	—	File name shown as the primary label.
error	string	—	Error message shown when `status` is `error`.
icon	ReactNode	—	Leading icon; defaults to a file-type glyph.
onRemove	() => void	—	Called when the remove button is clicked. Omit to hide it.
onRetry	() => void	—	Called when the retry button is clicked (shown on error).
progress	number	—	Upload progress 0–100. Shown as a thin bar when `status` is `uploading`.
size	number	—	Size in bytes. Rendered as a human-readable label.
status	enum	idle	Current upload state — drives the status icon and styling.

Example

API

On this page