build69
build69  /  Components  /  Media & Files  /  FileBrowser

FileBrowser

v1.0.26Updated 21 Oct 2026

Two-pane file browser: nested folder tree on the left, file table / grid on the right. Drag to move, right-click for actions.

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedfilesbrowsertreefolders+2

The default, out-of-the-box FileBrowser.

Recommended for+14
  • ✓File / document manager
  • ✓Asset library
  • ✓Backup browser
Tags+6
filesbrowsertreefoldersmediadefault
Features+4
  • Nested folder tree with expand/collapse
  • Right pane: table or grid view of files
  • Selection (single + multi)
  • Right-click context menu
  • Drag-to-move
  • Breadcrumb path
  • Search / filter
  • Upload zone
  • Preview pane (optional)
  • i18n: labels prop overrides every built-in UI string (sidebar, toolbar, sort/filter menus, bulk bar, context menu, empty states, preview pane, aria-labels)
Not recommended for−2
  • ✕Flat lists (use DataTable)
  • ✕Email inbox (use EmailThreeColumn)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "FileBrowser" })

Usage

import { FileBrowser } from '@/components/media/file-browser';

<FileBrowser tree={tree} files={files} view="list" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
tree

Folder tree

FolderNode[]yes
files

Files in current folder

FileItem[]yes
view

Right-pane view mode

'list' | 'grid'—
onBulkAction

Run a bulk action on the ticked files. WITHOUT it the selection bar shows the count and Clear only — the five action buttons used to render with no handler at all and did nothing when pressed.

(action: 'download' | 'move' | 'copy' | 'share' | 'delete', ids: string[]) => void—
onRename

A file was renamed in place. The new name shows straight away, but that is a local echo replaced whenever a fresh `files` array arrives — without this the rename was never told to anybody and vanished on the next parent render.

(id: string, name: string, previousName: string) => void—
onUpload

The sidebar Upload button was pressed; the component holds no files of its own, so the host opens its picker or upload flow from here, and without this prop the button is still shown but does nothing.

() => void—
onFolderSelect

A folder was chosen (its tree row clicked or activated with Enter or Space, or the breadcrumb that names it pressed); the component loads no folders of its own, so the host swaps `files`, `breadcrumbs` and `activeFolderId` from here, and without this prop a branch row still opens and closes but choosing a folder reports nothing.

(folderId: string) => void—
activeFolderId

Controlled current folder: its tree row takes the selected styling and the tree's tab stop, and when set it overrides every `FolderNode.active` flag in `tree` (leave it out to mark the current folder there instead).

string—
onFilesDrop

Files were dropped on the drop overlay; the component uploads nothing itself, so the host receives the dropped files here, and without this prop the overlay still opens and closes but the files go nowhere.

(files: File[]) => void—
labels

Override any built-in UI string — sidebar, toolbar, sort/filter menus, bulk bar, context menu, empty states, preview pane, drop overlay, aria-labels (i18n). Merged over DEFAULT_FILE_BROWSER_LABELS; {token} templates for parameterized strings. The ticked-files bar is the shared BulkActionBar since fb_ceedac5b, and FileBrowser passes it selectedCount, clearSelection and the bulkActions landmark name from this bag, so one translation still covers the whole component.

Partial<FileBrowserLabels>—

Related