FileItem

FileItem is a compound component that renders a single file’s upload state. Compose its named sub-components (FileItem.FileName, FileItem.UploadProgress, FileItem.Actions, etc.) to build custom layouts, or omit children entirely to use the built-in FileItem.Content default.

import { FileItem } from "@hyperserve/upload-react";

<FileItem file={file} layout="row" />

Usage

FileItem is a compound component. Use it with its sub-components to build custom file row/card layouts.

sample-video.mp4

50.0 MB

import { FileItem, Thumbnail } from "@hyperserve/upload-react";

<FileItem file={file} layout="column">
  <Thumbnail file={file} playback />
  <FileItem.FileName />
  <FileItem.Meta>
    <FileItem.FileSize />
    <FileItem.StatusIcon />
  </FileItem.Meta>
  <FileItem.UploadProgress />
  <FileItem.ErrorMessage />
  <FileItem.Actions>
    <FileItem.RemoveButton />
    <FileItem.RetryButton />
  </FileItem.Actions>
</FileItem>

Props

Prop	Type	Default	Description
file	FileState	required	The file state object
layout	"row" | "column"	"column"	Layout direction
style	CSSProperties	none	Container styles
className	string	none	Container class
children	ReactNode | (file) => ReactNode	none	Sub-components or render function

Sub-components

All sub-components read from the parent FileItem context. They don’t need explicit props.

Sub-component	Description
FileItem.FileName	File name, truncated with ellipsis
FileItem.FileSize	Human-readable file size
FileItem.ErrorMessage	Renders file.error when present
FileItem.RemoveButton	Hidden during processing/ready
FileItem.RetryButton	Only shown when failed
FileItem.StatusIcon	Spinner during processing, check mark when ready
FileItem.Meta	Flex row container for status metadata
FileItem.Actions	Flex column container for action buttons
FileItem.UploadProgress	Progress bar, visible only during uploading
FileItem.PlaybackPreview	Thumbnail in playback mode, visible only when ready
FileItem.Content	Opinionated default layout combining all sub-components

Default rendering

When children is omitted on FileItem, it renders FileItem.Content, which assembles all sub-components in a sensible default layout that adapts to the layout prop.