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/upload-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

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".