# FileManager Source: https://lumeo.nativ.sh/components/file-manager # 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 Preview Code Basic File Manager 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. Copy Code Preview Code Grid View 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. Copy Code Preview Code With Rename and Delete 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. Copy Code ## API Reference ### FileManager Property Type Default Description Root IReadOnlyList? — 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>>? 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 — 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> — 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 — 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? 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