FileItem

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { FileItem } from '@nizivo/react/unstable/file-item';

export function FileItemExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 12, maxInlineSize: 420 }}>
      <FileItem
        name="autumn-lookbook.pdf"
        status="uploading"
        progress={62}
        detail="2.4 of 3.9 MB · 62%"
      />
      <FileItem name="autumn-lookbook.pdf" status="done" detail="3.9 MB · Uploaded" />
      <FileItem
        name="autumn-lookbook.pdf"
        status="error"
        detail="Upload failed — file is over 20 MB"
      />
    </div>
  );
}

ImportCopy Anchor Link

import { FileItem } from '@nizivo/react/unstable/file-item';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/progress-bar.css
import '@nizivo/react/css/file-item.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: its buttons call onCancel and onRetry. How to choose.

StatesCopy Anchor Link

status is uploading (a ProgressBar named "Uploading autumn-lookbook.pdf", with progress from 0 to 100, and a cancel button), done (a success mark read as "Uploaded") or error (a red edge, the reason in detail and a retry button). Each button is named after the file. detail is the line under the name: the sizes, the percentage, or why it failed.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

FileItemLabels type

import type { FileItemLabels } from '@nizivo/react/unstable/file-item'

FileItem's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
cancelrequired	string	'Cancel upload of {name}'
donerequired	string	'Uploaded'	Read after a done file's name, for the success mark.
progressrequired	string	'Uploading {name}'	The progress bar's name: {name} is the file's.
retryrequired	string	'Retry upload of {name}'

FileItemProps type

import type { FileItemProps } from '@nizivo/react/unstable/file-item'

The props of FileItem, listed above.

FileItemStatus type

import type { FileItemStatus } from '@nizivo/react/unstable/file-item'

Where the upload is: uploading, done or failed.

type FileItemStatus = "uploading" | "done" | "error"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-file-item, .nz-file-item-action, .nz-file-item-detail, .nz-file-item-icon, .nz-file-item-mark, .nz-file-item-name, .nz-file-item-progress, .nz-file-item-text, .nz-progress-bar-track.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• file-item-action: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.