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/video-uploader-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/video-uploader-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
styles	FileItemStyles	none	Slot map applied to internal elements (see Slots below)
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.

Slots

Pass a styles slot map to theme every internal element from one prop. Slots merge over defaults; local style props on sub-components win over slots. See Theming for the canonical merge-order explanation.

Slot	Targets
root	The outer card container
contentInner	The inner wrapper (when using FileItem.Content)
fileName	FileItem.FileName text
fileSize	FileItem.FileSize text
errorMessage	FileItem.ErrorMessage div
removeButton	FileItem.RemoveButton button
retryButton	FileItem.RetryButton button
statusIcon	FileItem.StatusIcon outer span
statusText	”Processing…” text inside StatusIcon
meta	FileItem.Meta flex row
actions	FileItem.Actions flex column
progressTrack	FileItem.UploadProgress track
progressFill	FileItem.UploadProgress fill
thumbnail	Thumbnail rendered by FileItem.Content or PlaybackPreview

<FileItem
  file={file}
  styles={{
    root: { background: "#1e293b" },
    fileName: { color: "white" },
  }}
>
  <FileItem.Content />
</FileItem>

The React Native FileItem exposes the same slots plus two extras for the inner <Text> of its buttons, which web doesn’t need (it uses children text):

• removeButtonText
• retryButtonText

StatusIcon parity

FileItem.StatusIcon accepts an additional textStyle prop (the inner “Processing…” span) and a children render prop for full custom rendering:

<FileItem.StatusIcon textStyle={{ fontSize: 10 }} />

<FileItem.StatusIcon>
  {({ status, label }) => <CustomBadge status={status}>{label}</CustomBadge>}
</FileItem.StatusIcon>