ASP.NET Core Blazor [Preview]
Search results

Getting Started for Blazor File Manager in Visual Studio 2019

The section explains step-by-step process to create a File Manager in Blazor with building and publishing using Visual Studio 2019.

Setup the application

Follow the steps which is given in the Getting started page to setup the application and render the Blazor components.

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.FileManager packages.

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.FileManager

Initialize the Blazor File Manager component

Initialize the Essential JS 2 File Manager component in any view (.cshtml) page under in pages folder. For example, the File Manager component is added in the ~/Pages/Index.cshtml page.

The following code explains how to initialize a simple File Manager in Blazor page.

@page "/FileManager/Default"

@using Syncfusion.EJ2.RazorComponents.FileManager

<div class="control-section">
    <EjsFileManager ID="filemanager" View="@View">
        <FileManagerAjaxSettings Url="https://ng2jq.syncfusion.com/ej2services/api/FileManager/FileOperations"
        UploadUrl="https://ng2jq.syncfusion.com/ej2services/api/FileManager/Upload"
        DownloadUrl="https://ng2jq.syncfusion.com/ej2services/api/FileManager/Download"
        GetImageUrl="https://ng2jq.syncfusion.com/ej2services/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
        <FileManagerContextMenuSettings Visible=true></FileManagerContextMenuSettings>
        <FileManagerNavigationPaneSettings Visible=true></FileManagerNavigationPaneSettings>
        <FileManagerToolbarSettings Visible=true></FileManagerToolbarSettings>
        <FileManagerDetailsViewSettings ColumnResizing=true></FileManagerDetailsViewSettings>
        <FileManagerSearchSettings IgnoreCase=true></FileManagerSearchSettings>
        <FileManagerUploadSettings AutoUpload=true></FileManagerUploadSettings>
    </EjsFileManager>
</div>

@functions {

    public ViewType View = ViewType.LargeIcons;

}

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

File Manager Sample