End User Capabilities in Blazor FileManager Component

25 Apr 20237 minutes to read

The FileManager UI is comprised of several sections like View, Toolbar, Breadcrumb, Context Menu, and so on. The UI of the FileManager is enhanced with Details View for browsing files and folders in a grid, Navigation Pane for folder navigation, and Toolbar for file operations. The FileManager with all features has the following sections in its UI.

End User Capabilities in Blazor FileManager

The basic FileManager is a light weight component with all the basic functions. The basic FileManager has the following sections in its UI to browse files and folders and manage them with file operations.

Blazor FileManager

Toolbar

The Toolbar provides easy access to the file operations using different buttons and it is presented at the top of the FileManager.

If the Toolbar items exceed the size of the Toolbar, then the exceeding Toolbar size will be moved to Toolbar popup with a dropdown button at the end of Toolbar.

Refer Toolbar section in file operations to know more about the buttons present in Toolbar.

Blazor FileManager with Toolbar

Context Menu

The Context Menu appears on user interaction such as right-click. The FileManager is provided with Context Menu support to perform list of file operations with the files and folders. Context menu appears with varying menu items based on the targets such as file, folder (including navigation pane folders), and layout (empty area in view).

Context menu can be customized using the ContextMenuSettings, MenuOpened, and OnMenuClick events.

Refer Context Menu section to know more about the menu items present in Context Menu.

Blazor FileManager with Context Menu

Files and Folders Navigation

The FileManager provides navigation between files and folders using the following two options.

The navigation pane displays the folder hierarchy of the file system and provides easy navigation to the desired folder. Using NavigationPaneSettings, minimum and maximum width of the navigation pane can be changed. The navigation pane can be shown or hidden using the Visible option in the NavigationPaneSettings.

The FileManager provides breadcrumb for navigating to the parent folders. The breadcrumb in the FileManager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root.

Blazor FileManager with BreadCrumb

Large Icons View

The Large Icons View is the default starting view in the FileManager. The view can be changed by using the Toolbar view button or by using the view menu in Context Menu. The View API can also be used to change the initial view of the FileManager.

In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For image and video type files, a preview will be displayed. Extension thumbnails will be displayed for other type files.

Blazor FileManager with LargeIconView

Details View

In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as Name, Date Modified, Type, and Size. Each file has its own small icon representing the file type. Additional columns can be added using DetailsViewSettings API. The details view allows you to perform sorting using column header.

Blazor FileManger with DetailsView

File Operations

The Blazor FileManager component is utilized for browsing, managing, and organizing files and folders in a file system through a web application. It offers all essential file operations, including creating new folders, uploading and downloading files, deleting and renaming existing files and folders, as well as previewing image files.

Moreover, the table below displays the basic operations in the FileManager component and their corresponding functions.

Operation Name Function
read Read the details of files or folders available in the given path from the file system, to display the files for the user to browse the content.
create Creates a new folder in the current path of the file system.
delete Removes the file or folder from the file server.
rename Rename the selected file or folder in the file system.
search Searches for items matching the search string in the current and child directories.
details Gets the detail of the selected item(s) from the file server.
copy Copy the selected file or folder in the file system.
move Cut the selected file or folder in the file server.
upload Upload files to the current path or directory in the file system.
download Downloads the file from the server and the multiple files can be downloaded as ZIP files.

NOTE

The CreateFolder, Remove, and Rename actions will be reflected in the FileManager only after the successful response from the server.

File and Folder Selection

In the Blazor FileManager component, you can select files and folders using the mouse click and arrow keys. The FileManager allows you to select multiple files and folders by enabling the AllowMultiSelection property, which is enabled by default.

You can perform multiple selections by pressing the Ctrl key or Shift key and selecting the files and folders, or by using the checkbox. To select all files in the current directory, you can use the Ctrl + A shortcut.

The FileSelected event will be triggered when an item in the FileManager control is selected or unselected.

File and folder selection in Blazor FileManger

Create, Rename, Delete a File or Folder

In the Blazor FileManager component, you can perform the create, rename, and delete operation for the files and folder with the help of the Toolbar items button or by using Context Menu items.

Refer to the Toolbarand Context Menu sections to learn more about the items that are present in the Toolbar and Context Menu.

Create a folder in Blazor FileManger

Rename, delete a folder in Blazor FileManger

Moving File or Folder

In the Blazor FileManager component, you can move desired files or folders by using the cut or copy items button in the Toolbar, or by using the Context Menu. Additionally, you can move files or folders by utilizing the drag and drop functionality, which requires enabling the AllowDragAndDrop property to true.

To learn more, you can refer to the Toolbar, Context Menu, and Drag and Drop sections.

Moving file or folder in Blazor FileManager

Upload or Download a File

In the Blazor FileManager component, you can perform the upload or download operations with the help of the Toolbar items button or by using Context Menu items.

Refer to the Toolbar and Context Menu sections to learn more about the items that are present in the Toolbar and Context Menu.

Upload a file in Blazor FileManger

Download a file in Blazor FileManger

Searching Files and Folders

In the Blazor FileManager component, you are able to search for the wanted files and folders using the default input search functionality option.

Searching files and folders in Blazor FileManger

Cut, Copy, and Paste

You can perform the cut, copy, and paste operation for the files and folders in the Blazor FileManager component with the help of the Toolbar items button or by using Context Menu items.

Refer to the Toolbarand Context Menu sections to learn more about the items that are present in the Toolbar and Context Menu.

File operations in Blazor FileManager