Package
LumeoA11yfocus-managedkeyboardmenumenuitemDepends ontooltipTested
Tier 3 · 38 testsView source ↗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.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <FileManager />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
38 tests across 5 files. Auto-generated from the test suite.
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
Documents
Images
Source
| Name | Size | Modified | |
|---|---|---|---|
Documents | — | — | |
Images | — | — | |
Source | — | — | |
README.md | 3.5 KB | 2024-01-01 00:00 | |
config.json | 512 B | 2024-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
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.
Documents
Images
| Name | Size | Modified | |
|---|---|---|---|
Documents | — | — | |
Images | — | — | |
README.md | 2.0 KB | — |
Folders with Children == null are loaded on demand via the LoadChildren callback the first time they're opened.
Documents
Media
| Name | Size | Modified | |
|---|---|---|---|
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
| Prop | Type | Default | Description |
|---|---|---|---|
| Root | IReadOnlyList<FileSystemNode>? | — | The file tree's top-level nodes. Rendered in both the left folder tree and (when CurrentPath is null) the right-hand file list. |
| CurrentPath | string? | — | The ID of the currently open folder. Null means the root level. Uses Id as the path identifier. |
| LoadChildren | Func<FileSystemNode, Task<List<FileSystemNode>>>? | — | Called the first time a folder is opened if its Children is null. Return the loaded children. |
| ViewMode | FileManagerViewMode | FileManagerViewMode.List | List or grid layout for the right-hand file view. Two-way bindable via ViewModeChanged; otherwise toggled internally by the toolbar buttons. |
| SelectedNode | FileSystemNode? | — | The currently selected file/folder node (row or tile highlight, and the gate for the toolbar Delete button). Two-way bindable via SelectedNodeChanged. |
| Class | string? | — | Additional CSS classes merged onto the root panel. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root panel. |
Events
| CurrentPathChanged | EventCallback<string?> | Raised when the user navigates (double-click, breadcrumb, or up button) with the newly-open folder's id, or null when returning to the root. |
| ViewModeChanged | EventCallback<FileManagerViewMode> | Raised when the user switches between list and grid view. |
| SelectedNodeChanged | EventCallback<FileSystemNode?> | Raised when the selection changes — via a click, Space, or an internal clear (e.g. after the selected node is deleted or removed from a refreshed Root). |
| OnFileOpen | EventCallback<FileSystemNode> | Raised when a file (not a folder) is opened via double-click or Enter. |
| OnRename | EventCallback<(FileSystemNode Node, string NewName)> | Raised with the node and trimmed new name when an inline rename is committed (Enter or blur) with a non-empty, changed value. Enables the context menu's Rename item. |
| OnDelete | EventCallback<IReadOnlyList<FileSystemNode>> | Raised with the node(s) to delete — from the context menu or the toolbar Delete button (acting on SelectedNode). Enables both entry points. |
| OnNewFolder | EventCallback<FileSystemNode> | Raised with the current folder (or a synthetic root node) when the toolbar's New Folder button is clicked. Enables that toolbar button. |
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