Toolbar in Blazor File Manager Component

20 Feb 20253 minutes to read

The Toolbar in the File Manager provides a user-friendly interface for performing various file operations. It contains pre-defined items that correspond to specific actions. Here are some key points about the toolbar.

Built-in Toolbar items

By default, the File Manager includes several pre-defined toolbar items. These items are ready to use and come with associated actions. This collection can be modified by defining the required items in FileManagerToolbarSettings.

Some common built-in toolbar items include:

• New Folder - Creates a new folder in the current directory.
• SortBy - Allows users to sort files and folders based on different criteria (e.g., name, size, date modified).
• Upload - Enables users to upload files to the server.
• Refresh - Specifies the array of string that is used to configure file items.
• View - Specifies the array of string that is used to configure folder items.
• Details - Specifies the array of string that is used to configure layout items.

Control Toolbar visibility

The Toolbar visibility can also be controlled by using the Visible property. Set this property as false to hide the toolbar. You can also toggle this property dynamically based on your application logic.

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
                             DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerToolbarSettings Visible=false></FileManagerToolbarSettings>
</SfFileManager>

Events

The Blazor File Manager Toolbar component has a ToolbarCreated and ToolbarItemClicked events that can be triggered for certain actions. These events can be bound to the File Manager using the FileManagerEvents, which requires the TValue to be provided.

NOTE

All the events should be provided in a single FileManagerEvents component.

ToolbarCreated

The ToolbarCreated event of the Blazor File Manager component is triggered before creating the toolbar items.

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
                             DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarCreated="ToolbarCreated"></FileManagerEvents>
</SfFileManager>

@code {
    public void ToolbarCreated(ToolbarCreateEventArgs args)
    {
        // Here, you can customize your code.
    }
}

ToolbarItemClicked

The ToolbarItemClicked event of the Blazor File Manager component is triggered when the toolbar item is clicked.

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
                             DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarItemClicked="ToolbarItemClicked"></FileManagerEvents>
</SfFileManager>

@code {
    public void OnMenuClick(ToolbarClickEventArgs<FileManagerDirectoryContent> args)
    {
        // Here, you can customize your code.
    }
}

See Also

Adding Custom Item To Toolbar