Blazor FileManager Overview

Updated on Oct 1, 2026

The Blazor FileManager component is an Explorer-like component that enables you to upload, download, rename and manage file and folders.

Creating Blazor FileManager

1. Add the TelerikFileManager tag.
2. Set FileManager Data attribute to an IEnumerable<TItem>. Read more for the component data binding.
3. Set the Path parameter via one-way or two-way binding.
4. To allow file operations such as rename, delete, and create new folder, handle the following FileManager events: (OnModelInit, OnCreate, OnUpdate, OnDelete, OnDownload).

Telerik Blazor FileManager

Example

View Source

Loading ...

Each FileManagerEntry's Path needs to finish with the data item's Name, following the style used in real file systems. Also, ensure the top-level directories and files start with a predefined root path.

Data Binding

The FileManager allows data binding to flat and hierarchical data. There are two alternative ways to provide data to the FileManager:

• Set the FileManager Data attribute. In this case, the component will hold all the data.

• Use the FileManager OnRead event and pass the data to the event argument. In this case, the FileManager will hold only the data items for the current folder.

The following list of resources provides details and examples for data binding a FileManager in various scenarios:

• General information on how data binding works - FileManager Data Binding Overview.

• Binding to a self-referencing flat data source - Bind FileManager to Flat Self-Referencing Data.

• Using hierarchical data source with item collections nested in each item - Bind FileManager to Hierarchical Data.

• Handling the OnRead event to provide only the current folder data - FileManager OnRead.

Views

The FileManager can show files and folders in a Grid or in a ListView. The default mode is ListView, which displays files and folders as thumbnails.

Toolbar

The FileManger integrates a Toolbar with various commands. Read more about the available FileManager Toolbar commands...

Navigation

The FileManger allows navigating through the file system in a couple ways - TreeView in a dedicated pane and a Breadcrumb. Read more about the FileManager Navigation...

Preview Pane

A dedicated Preview Pane can be toggled to display details for the selected file or folder. Its visibility is controlled via a Switch in the Toolbar. Read more about the FileManager Preview Pane...

Context Menu

The FileManager displays a Context Menu on right click of an item. The menu provides several built-in commands. Read more about the Context Menu options...

Reference and Methods

To use the FileManager methods, define a reference to the component instance with the @ref attribute (example below). The FileManager is a generic component and its type comes from the model it is bound to.

The available FileManager methods are:

• Rebind - refreshes the FileManager data.

Example

View Source

Loading ...

FileManager Parameters

The following table lists the FileManager parameters. Also check the FileManager API Reference for a full list of properties, methods and events.

Parameter	Type and   DefaultValue	Description
Data	IEnumerable<TItem>	Allows providing data source to the component. See data bindnig.
EnableLoaderContainer	bool	Specifies if loader container should be shown on slow async operations
Path	string	The current path. Updated when the user navigates. Two-way bindale. Handle the PathChanged event if you need to react to the user navigation.
View	FileManagerViewType enum (ListView)	The layout of the FileManager main section. It can show the files and folders as table rows or as thumbnails.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor FileManager:

Parameter	Type and   DefaultValue	Description
Class	string	The CSS class that will be rendered on the topmost wrapping element of the component.
Width	string	The width of the component.
Height	string	The height of the component.

Next Steps

• Data bind the FileManager
• Explore FileManager Events

See Also

• FileManager API
• Live Demo: FileManager