The Blazor File Manager is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. This component also provides easy navigation for browsing folders to select a file or folder from the file system.
The Blazor File Manager UI consists of toolbar, navigation pane, and content pane sections through which the files or folders in the file system can be accessed and managed. The complete layout can be customized with features like right-to-left alignment, enabling or disabling the toolbar and navigation pane, and switching between views.
The toolbar contains the list of tools for performing various operations like file upload or download and view switching. The toolbar can also be configured to add any custom functionality to be performed with the file system.
The navigation pane allows quick and direct access to a file or folder in a file system where the entire folder hierarchy is listed using a tree view. This can be made visible or hidden as needed.
The content pane displays the files and folders in the file system. The files in the content pane can be displayed in either large icons view or details view.
The Blazor File Manager component includes all the common operations needed for managing a file system. It includes copy, move, upload, download, edit, create, delete, and sort.
The Blazor File Manager component allows the easy uploading and downloading of files in a file system.
Files and folders in the file system can be sorted in either ascending or descending order simply by clicking the column header. Files and folders can be sorted based on name, date created, size, etc.
The Blazor File Manager control contains built-in searching functionality that allows you to search for and access a file or folder in the current path and its child folders.
Files and folders can be moved within the file system by dragging and dropping them. Drag-and-drop support can be turned on or off in the Blazor File Manager.
The Blazor File Manager with rich UI provides support to restrict access to files and folders by defining a set of rules for them. Only authorized users will be able to access them.
You can specify the types of files that can be uploaded in the Blazor File Manager. Other file types will be restricted on upload.
The Blazor File Manager component has built-in support for the selection of multiple files or folders. Multiple-file selection will be effective when a single operation like download or delete is performed over multiple files in the file system.
The Blazor File Manager control has context menu support to list the operations to be performed with the files and folders. It appears when a file or folder is right-clicked. The context menu items can be customized according to user preference.
The text of a context menu list and the tooltips being displayed in the user interface can be localized to any supported language. The Blazor File Manager component uses a localization library (l10) to localize the text values.
The Blazor File Manager component allows you to manage data from the following storage services.
Find the service links below:
Find the service links below:
Amazon S3 Bucket file provider.
Microsoft Azure file provider.
Firebase Realtime Database file provider.
Find the service links below:
Find the service links below:
The Blazor File Manager layout supports several built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and High Contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look by either simply overriding the SASS variables or using our Theme Studio application.
Developers have control over all the UI elements and behaviors of the components to provide the best experience to end users with a rich set of developer-friendly APIs.
Easily get started with the Blazor File Manager using a few simple lines of C# code as demonstrated below. Also explore our Blazor File Manager Example that shows you how to render and configure the Blazor File Explorer.
@using Syncfusion.Blazor.FileManager
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="/api/SampleData/FileOperations"
GetImageUrl="/api/SampleData/GetImage">
</FileManagerAjaxSettings>
</SfFileManager>
namespace filemanager.Server.Controllers
{
[Route("api/[controller]")]
public class SampleDataController : Controller
{
// Processing the GetImage operation
[Route("GetImage")]
public IActionResult GetImage(FileManagerDirectoryContent args)
{
//Invoking GetImage operation with the required paramaters
// path - Current path of the image file; Id - Image file id;
return this.operation.GetImage(args.Path, args.Id, false, null, null);
}
}
}
File Manager layout is also available in Angular, React, Vue and JavaScript frameworks that are built from their own TypeScript libraries. Check out the different File Manager platforms from the links below,
You can find our Blazor File Manager demo here.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.