Blazor File Manager

The Telerik UI for Blazor FileManager component enables you to easily manage files and folders and perform common operations like accessing, renaming, sorting, searching, uploading and downloading of files. Also known as a file explorer, the component provides easy navigation for browsing and selecting folders & files from the file system and managing them in your Blazor apps. The FileManager includes a built-in toolbar with predefined commands, three panes for viewing and previewing content, a context menu for the file list and built-in localization.

The FileManager component supports single and multiple selection for both folders and files. The multiple selection feature comes in handy when you need to perform a single operation on multiple files in the file system.

Leverage the two-way binding of the selected items in the Telerik UI for Blazor File Manager to showcase which files are picked and give users the flexibility to limit those if needed.

See the Telerik UI for Blazor FileManager expose selected items demo

The most common operations related to managing files and folders are neatly organized into a dedicated toolbar in the header of the FileManager. You can take advantage of the following default commands :

• Create a new folder
• Show/hide file details preview
• Search box, allowing you to filter based on folder and file names
• File upload

The Telerik UI for Blazor FileManager toolbar contains several prebuild commands, including new folder, upload, sort by, search, etc. The out-of-the-box FileManager toolbar leaves room for customization – you can decide which of the built-in tools to include, manage their position and add your custom tools.

See Telerik UI for Blazor FileManager toolbar demo

The Blazor File Manager component comes with built-in Search functionality, allowing you to find the specific file in the currently selected path.

See how the FileManager Search feature works.

The FileManager for Blazor provides a context menu for the file list content. It is available in both the list and tile views and provides built-in Rename, Download and Delete commands.

See how the context menu in the Blazor FileManager component works.

You can easily apply sorting to both files and folders using the provided visual indicators. The FileManager supports the standard ascending and descending modes, plus predefined options to sort by name, type, size, date created and modified.

For folder and file creation, use the dedicated command buttons in the file manager toolbar. File uploads happen via a dialog box where users provide the related details.

Editing a folder/file name happens from the context menu using the default “Rename” commands.

The component supports both file upload and download. Users can conveniently download a selected file by using the provided command in the context menu. 

The Blazor FileManager has built-in localization support, which makes it easy to translate commands and context menu text to any language that your Blazor app may require.

See how to translate texts within the Blazor File Manager UI component.

The File Manager component is organized into three resizable panes: folder pane (a tree view with folder structure hierarchy), content pane (list and tiles views) and preview pane, which shows additional information about the selected files or folders.

You can visualize content in the Blazor FileManager in two different views that can be switched between from the Toolbar button group:

• Tiles View
• List View

See details about the Blazor FileManager views.

The Telerik UI for Blazor FileManager component has multiple built-in themes and swatches you can choose from. Explore the Default (our own styling), Material (based on the Material Design guidelines), Bootstrap and Fluent (based on Microsoft Fluent UI) themes and choose the swatch that best meets your design requirements. 

The Telerik UI for Blazor File Manager component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

Learn more in our Blazor Right-to-Left Support documentation