FileList

FileList renders all files in the upload queue in list or grid layout, reading file state from UploadProvider context. Pass a render function as children to use a custom item renderer; otherwise it renders FileItem.Content per file.

Default

sample-video.mp4

50.0 MB

sample-video.mp4

50.0 MBProcessing...

sample-video.mp4

50.0 MB

sample-video.mp4

50.0 MB

Upload failed. Check your connection.

import { FileList } from "@hyperserve/video-uploader-react";

<FileList />

Empty state

No files selected yet.

<FileList emptyMessage="No files selected yet." />

Grid mode

sample-video.mp4

50.0 MB

sample-video.mp4

50.0 MBProcessing...

sample-video.mp4

50.0 MB

sample-video.mp4

50.0 MB

Upload failed. Check your connection.

<FileList mode="grid" columns="repeat(3, 1fr)" />

Props

Prop	Type	Default	Description
`mode`	`"list" \| "grid"`	From `ViewModeProvider` or `"list"`	Layout mode
`columns`	`string`	`"repeat(auto-fill, minmax(180px, 1fr))"`	CSS `grid-template-columns` for grid mode
`emptyMessage`	`ReactNode`	none	Shown when no files
`emptyClassName`	`string`	none	Class for empty state container
`emptyStyle`	`CSSProperties`	none	Styles for empty state container
`renderEmpty`	`() => ReactNode`	none	Custom empty state renderer (overrides `emptyMessage`)
`children`	`(file, index) => ReactNode`	none	Custom item renderer
`style`	`CSSProperties`	none	Container styles
`className`	`string`	none	Container class
`styles`	`FileListStyles`	none	Slot map applied to internal elements (see Slots below)

Custom item rendering

When children is omitted, FileList renders a default FileItem per file. Provide a render function for custom items:

sample-video.mp4

<FileList>
  {(file, index) => (
    <FileItem key={file.id} file={file} layout="column">
      <Thumbnail file={file} playback />
      <FileItem.FileName />
      <FileItem.UploadProgress />
      <FileItem.Actions>
        <FileItem.RemoveButton />
        <FileItem.RetryButton />
      </FileItem.Actions>
    </FileItem>
  )}
</FileList>

View mode

FileList reads the view mode from ViewModeProvider context when available. The mode prop always takes precedence over context. Without either, it defaults to "list".

Slots

Pass a styles slot map to theme internal elements. Slots merge over defaults; local style/emptyStyle props win over slots. See Theming for the canonical merge-order explanation.

Slot	Targets
`root`	The outer list/grid container
`empty`	The empty-state container

The React Native FileList exposes the same slots plus an emptyText slot for the inner <Text> of the empty state, which web doesn’t need (it accepts a ReactNode for emptyMessage).

<FileList
  styles={{
    root: { gap: 12 },
    empty: { background: "#f8fafc", padding: 24 },
  }}
  emptyMessage="No files selected yet."
/>