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.
- Toolbar (For direct access to file operations)
- Context Menu (For accessing file operations)
- Navigation Pane (For easy navigation between folders)
- Breadcrumb (For parent folder navigations)
- Large icons view (For browsing files and folders using large icon view)
- Details view (For browsing files and folders using details view)
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.
- Breadcrumb (For parent folder navigations)
- Large icons view (For browsing files and folders)
- Context Menu (For accessing file operations)
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.
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.
Files and Folders Navigation
The FileManager provides navigation between files and folders using the following two options.
Navigation Pane
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.
BreadCrumb
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.
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.
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.
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.
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.
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.
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.
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.
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.
