FileListToolbar

FileListToolbar is a two-slot bar (left and right) for showing file count and a list/grid view toggle. Both slots are fully replaceable: pass null to hide a slot or a custom ReactNode to override the default sub-component.

3 files added

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

<FileListToolbar />

Props

Prop	Type	Default	Description
left	ReactNode | null	FileCount	Left slot content
right	ReactNode | null	ViewToggle	Right slot content
showFileCount	boolean	true	Show default file count in left slot
showViewToggle	boolean	true	Show default view toggle in right slot
style	CSSProperties	none	Container styles
className	string	none	Container class

Sub-components

FileListToolbar.FileCount

Shows "N files added" by default. Accepts a label render prop:

4 videos

<FileListToolbar
  left={
    <FileListToolbar.FileCount
      label={(count) => `${count} video${count !== 1 ? "s" : ""}`}
    />
  }
/>

FileListToolbar.ViewToggle

List/grid toggle buttons. Requires a ViewModeProvider ancestor. Accepts a children render prop for custom toggle UI:

ListGrid

<FileListToolbar.ViewToggle>
  {({ viewMode, setViewMode }) => (
    <select
      value={viewMode}
      onChange={(e) => setViewMode(e.target.value as "list" | "grid")}
    >
      <option value="list">List</option>
      <option value="grid">Grid</option>
    </select>
  )}
</FileListToolbar.ViewToggle>