| Selected Items Count |
Left section |
Right section |
| `0` (none of the items) |
- SortBy
- Refresh
- NewFolder
- Upload
|
|
| `1` (single item selected) |
|
- Selected items count
- View
- Details
|
| `>1` (multiple selection) |
|
- Selected items count
- View
- Details
|
## Server-side Configuration
This documentation outlines the server-side implementation and configuration required for enabling comprehensive file management operations in the Blazor File Manager component.
### Create Models
Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder.
### Create a new folder Controllers
To initialize a local service, create a new folder named `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder.
Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file
File Manager's base functions are available in the following namespace.
```cshtml
using Syncfusion.EJ2.FileManager.Base;
````
File Manager's operations are available in the following namespace.
````cshtml
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
````
### Initialize the service in controller
File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder.
To perform the action add the following code in that `FileManagerController.cs` file.
{% tabs %}
{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Http.Features;
//File Manager's base functions are available in the below namespace.
using Syncfusion.EJ2.FileManager.Base;
//File Manager's operations are available in the below namespace.
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
namespace filemanager.Server.Controllers
{
[Route("api/[controller]")]
public class FileManagerController : Controller
{
public PhysicalFileProvider operation;
public string basePath;
string root = "wwwroot\\Files";
[Obsolete]
public FileManagerController(IWebHostEnvironment hostingEnvironment)
{
this.basePath = hostingEnvironment.ContentRootPath;
this.operation = new PhysicalFileProvider();
this.operation.RootFolder(this.basePath + "\\" + this.root); // It denotes in which files and folders are available.
}
// Processing the File Manager operations.
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent args)
{
switch (args.Action)
{
// Add your custom action here.
case "read":
// Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
case "delete":
// Path - Current path where the folder to be deleted; Names - Name of the files to be deleted
return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
case "copy":
// Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
case "move":
// Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
case "details":
// Path - Current path where details of file/folder is requested; Name - Names of the requested folders
return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
case "create":
// Path - Current path where the folder is to be created; Name - Name of the new folder
return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
case "search":
// Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
case "rename":
// Path - Current path of the renamed file; Name - Old file name; NewName - New file name
return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
}
return null;
}
}
}
{% endhighlight %}
{% endtabs %}
N> For standalone Blazor WASM applications, the service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/) can be used. This service is an ASP.NET Core project that acts as the backend API for your File Manager
To configure and map the controller, open the `~/Program.cs` file of the server part of the application. Add the following code to configure the service for the controller and map the controller after `app.UseRouting()`. The `app.UseRouting()` middleware should be placed after `app.UseHttpsRedirection()`. The correct ordering is essential to ensure proper request handling and middleware functionality:
```cshtml
builder.Services.AddControllers();
...
app.UseRouting();
app.MapControllers();
```
This will configure and map the controller in your Blazor App.
## Add File Manager to the Application
After configuring the server-side service, integrate the Syncfusion® Blazor File Manager component into the application by creating a dedicated Razor component.
### Create the Razor Component
Add the Blazor File Manager component in `.razor` file inside the `Pages` folder.
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
@using Syncfusion.Blazor.FileManager