Lumeo

FileManager

A headless file and folder explorer with a folder tree, breadcrumb navigation, list and grid views, lazy loading, inline rename, and context-menu operations. The consumer provides the data and handles all filesystem operations.

When to Use

  • Cloud storage or asset manager UIs (S3 browser, media library, document vault)
  • CMS file pickers where the tree of folders and files is fetched from an API
  • Any app that needs to expose a hierarchical data store with rename / delete / new-folder operations
  • Design tools or code editors with a sidebar file-explorer panel
NameSizeModified
Documents
——
Images
——
Source
——
README.md
3.5 KB2024-01-01 00:00
config.json
512 B2024-04-30 00:00

A full-featured file explorer wired to an in-memory tree. Double-click a folder to navigate into it.

Documents
Images
Source
README.md
config.json

Switch to icon-grid tiles with ViewMode.Grid. The view-mode toggle in the toolbar is also available.

NameSizeModified
Documents
——
Media
——
README.md
1.0 KB—

Right-click any item or use the toolbar to rename or delete. Changes are applied to the in-memory sample tree.

API Reference

FileManager

Property Type Default Description
Root IReadOnlyList<FileSystemNode>? — Top-level nodes of the file tree. Required.
CurrentPath string? null ID of the currently open folder. null = root. Uses FileSystemNode.Id as the identifier. Supports two-way binding.
LoadChildren Func<FileSystemNode, Task<List<FileSystemNode>>>? null Lazy-load callback invoked the first time a folder with Children == null is opened. Return the loaded children.
ViewMode FileManagerViewMode List List shows a table (Name / Size / Modified). Grid shows icon tiles. Supports two-way binding.
SelectedNode FileSystemNode? null The currently selected file or folder node. Supports two-way binding.
OnFileOpen EventCallback<FileSystemNode> — Fired when a file is double-clicked. Use this to open a preview, download, etc.
OnRename EventCallback<(FileSystemNode, string)> — Fired when the user commits an inline rename. Tuple contains the node and the new name. When set, the Rename option appears in the context menu.
OnDelete EventCallback<IReadOnlyList<FileSystemNode>> — Fired when the user deletes one or more nodes via the context menu or toolbar. When set, a Delete toolbar button appears for the selected item.
OnNewFolder EventCallback<FileSystemNode> — Fired when the user clicks New Folder in the toolbar. Receives the currently open folder (or a synthetic root node). When set, the toolbar button appears.
Class string? — Additional CSS classes applied to the root element.

FileSystemNode

Property Type Description
Id string Unique identifier used as the navigation key for CurrentPath.
Name string Display name shown in the tree and file list.
IsFolder bool True for folders, false for files. Determines tree visibility and double-click behavior.
Size long? File size in bytes. Displayed as a human-readable string (KB / MB / GB). Null for folders.
Modified DateTime? Last-modified timestamp displayed in yyyy-MM-dd HH:mm format.
Children List<FileSystemNode>? Child nodes for folders. Null triggers lazy loading (if LoadChildren is provided). An empty list renders the "empty folder" state.
IconName string? Optional Lucide icon property name (e.g. "Star") that overrides the automatic icon selection by file extension.
Path string? Optional full display path. Informational only — the component uses Id for navigation.
Tag object? Arbitrary consumer payload. Not used by the component itself.

Related Components

  • TreeView — the standalone tree used for hierarchical data outside a file manager context
  • DataGrid — for tabular data with sorting, filtering, pagination, and export
  • Breadcrumb — the standalone breadcrumb navigation primitive
  • FileUpload — drag-and-drop file upload with progress tracking