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 />
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
| 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.
Switch to icon-grid tiles with ViewMode.Grid. The view-mode toggle in the toolbar is also available.
| 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.
| 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
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