Easily Change the Blazor File Manager Content for Different Users
Tags: blazor, webdev, csharp, dotnet
Published: 2021-07-19 12:22:10

---
title: Easily Change the Blazor File Manager Content for Different Users
published: true
date: 2021-07-19 11:00:28 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/easily-change-the-blazor-file-manager-content-for-different-users.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Easily-Change-the-Blazor-File-Manager-Content-for-Different-Users-672x372.png
---

Syncfusion [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Link to Blazor File Manager") is a graphical user interface component for managing the file system. It allows users to perform common file operations like accessing, editing, and sorting files or folders. This component also provides easy navigation through folders to select a file or folder in the file system. In this blog, we are going to see how to change the display content in the Blazor File Manager component based on the user login.

Let’s consider email management as an example, where each user has their own credentials and emails to access. We are going to display the emails and folders based on the user login.

## Initialize the Blazor File Manager

First things first, let’s initialize the Blazor File Manager component.

**Note:** Refer to the [Getting Started with Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/getting-started/ "Link to Getting started with Blazor FileManager component") documentation to render the File Manager in your application.

1. Add the Blazor File Manager component with local service in the **razor** file, as shown in the following code example.
```html
@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/Mail/FileOperations"
                             DownloadUrl="/api/Mail/Download"
                             UploadUrl="/api/Mail/Upload"
                             GetImageUrl="/api/Mail/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>
```
2. Then, create a controller named **MailController** and add the following code in the **MailController.cs** file.
```csharp
public class MailController: Controller
{
    public PhysicalFileProvider operation;
    public string basePath;
    string root = "wwwroot\\Files";

    [Obsolete]
    public MailController(IHostingEnvironment hostingEnvironment)
    {
        this.basePath = hostingEnvironment.ContentRootPath;
        this.operation = new PhysicalFileProvider();
        this.operation.RootFolder(this.basePath + "\\" + this.root);
    }

    // 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));
        ...
        }
        return null;
    }
}
```
3. Now, add the root path to display the folders and files in the Blazor File Manager component. Here, we have showcased the folder and files from the wwwroot\\Files.

Then, the component will be rendered like in the following screenshot. We have displayed three different users’ details in the **Files** folder.

![Blazor File Manager Displaying the User Details in the Files Folder](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-File-Manager-Displaying-the-User-details-in-the-Files-Folder.png)<figcaption>Blazor File Manager Displaying the User Details in the Files Folder</figcaption>

## Add the Entity Framework

We are going to use the Entity Framework to handle logged-in user details. Follow these steps to configure Entity Framework in the application:

1. Create a DBContext class named **UserContext** to connect to the Microsoft SQL Server database.Refer to the following code example.
```csharp
using Microsoft.EntityFrameworkCore;
using Demo.Data;

namespace Demo.Shared.DataAccess
{
    public class UserContext : DbContext
    {
        public virtual DbSet<UserDetails> User { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                // To make the sample runnable, replace your local file path for the MDF file here. 
                optionsBuilder.UseSqlServer(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename='D:\Demo\Shared\App_Data\NORTHWND.MDF';Integrated Security=True;Connect Timeout=30");
            }
        }
    }
}
```
2. Now, create a class named **UserDataAccessLayer** , which acts as the data access layer for retrieving the records from the database table. Also, add the methods **GetUser ** and  **UpdateUser** in the **UserDataAccessLayer.cs** file to handle the read and update operations, respectively.Refer to the following code example.
```csharp
using Microsoft.EntityFrameworkCore;
using Demo.Data;

namespace Demo.Shared.DataAccess
{
    public class UserDataAccessLayer
    {
        UserContext db = new UserContext();

        // returns the User data from the database.
        public DbSet<UserDetails> GetUser()
        {
            try
            {
                return db.User;
            }
            catch
            {
                throw;
            }
        }

        // Update the existing data in the database.
        public void UpdateUser(UserDetails name)
        {
            try
            {
                db.Entry(name).State = EntityState.Modified;
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }
}
```
3. We have already created the controller class **MailController** to handle the file operations. Now, we are going to add methods to handle the data from the Entity Framework in this existing controller.Refer to the following code example.
```csharp
// Get user ID from a data source.
[HttpGet("{id}")]
public object GetIndex()
{
    // Get the DataSource from Database.
    var data = db.GetUser().ToList();
    int UserId;
    var count = data.Count;
    if (count > 0)
    {
        UserId = (data[data.Count - 1].UserId);
    }
    else
    {
        UserId = 1;
    }
    return UserId;
}

// Get username from data source.
public object GetName()
{
    // Get the DataSource from Database.
    var data = db.GetUser().ToList();
    string name;
    var count = data.Count;
    if (count > 0)
    {
        name = (data[data.Count - 1].Name);
    }
    else
    {
        name = "User 1";
    }
    return name;
}

// Update user details into data source.
[Route("SetUser")]
public object SetUser([FromBody] User args)
{
    UserDetails CurrentUser = new UserDetails();
    CurrentUser.Id = 1;
    CurrentUser.UserId = args.UserId;
    CurrentUser.Name = args.Name;
    db.UpdateUser(CurrentUser);
    return null;
}
```

## Add logged in page

Let’s use the  [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list "Link to Blazor Dropdown List") component to switch the user login. To do so, add the list of user details as the data source for the Dropdown List component.

Refer to the following code.

```html
@using Syncfusion.Blazor.DropDowns

<span>Signed in: </span>
<SfDropDownList TValue="string" TItem="User" Placeholder="Select a User" DataSource="@LocalData" Width="200px" @bind-Value="@DropVal">
    <DropDownListFieldSettings Value="UserId" Text="Name"></DropDownListFieldSettings>
    <DropDownListEvents TValue="string" TItem="User" ValueChange="OnSelected"></DropDownListEvents>
</SfDropDownList>

@code {

    public string DropVal;
    List<User> LocalData = new List<User> {
        new User() { UserId = 1, Name = "User 1" },
        new User() { UserId = 2, Name = "User 2" },
        new User() { UserId = 3, Name = "User 3" },
        };
    protected override async Task OnInitializedAsync()
    {
        // To get the signed item from the database.
        var id = await Http.GetJsonAsync<int>("api/Mail/index");
        this.DropVal = id.ToString();
    }
}
```

## Update the Blazor File Manager based on logged in details

For initial rendering, get the logged-in user’s details from the data source and set the root folder using the **RootFolder** method in the controller.

```csharp
var rootPath = this.root + "\\" + GetName();
this.operation.RootFolder(this.basePath + "\\" + this.root);
```

Then, add the change event in the Blazor Dropdown List component to handle the dynamic user login.

Refer to the following code example.

```csharp
private async Task OnSelected(ChangeEventArgs<string, User> args)
{
    if (args.IsInteracted)
    {
        string stringPayload = await Task.Run(() => JsonSerializer.Serialize(args.ItemData));
        HttpContent httpContent = new StringContent(stringPayload, Encoding.UTF8, "application/json");
        await Http.PutJsonAsync("api/Mail/SetUser", args.ItemData);
        uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
    }
}
```

## Output

The following code example is the combined code in the Razor page.

```html
@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.DropDowns
@using System.Text;
@using System.Text.Json;
@using Demo.Data;

@inject HttpClient Http
@inject NavigationManager uriHelper;

<span>Signed in: </span>
<SfDropDownList TValue="string" TItem="User" Placeholder="Select a User" DataSource="@LocalData" Width="200px" @bind-Value="@DropVal">
    <DropDownListFieldSettings Value="UserId" Text="Name"></DropDownListFieldSettings>
    <DropDownListEvents TValue="string" TItem="User" ValueChange="OnSelected"></DropDownListEvents>
</SfDropDownList>
<div style="margin: 20px 0">
    <SfFileManager TValue="FileManagerDirectoryContent">
        <FileManagerAjaxSettings Url="/api/Mail/FileOperations"
                                 DownloadUrl="/api/Mail/Download"
                                 UploadUrl="/api/Mail/Upload"
                                 GetImageUrl="/api/Mail/GetImage">
        </FileManagerAjaxSettings>
    </SfFileManager>
</div>

@code {

    public string DropVal;
    List<User> LocalData = new List<User> {
        new User() { UserId = 1, Name = "User 1" },
        new User() { UserId = 2, Name = "User 2" },
        new User() { UserId = 3, Name = "User 3" },
        };
    protected override async Task OnInitializedAsync()
    {
        // To get the signed item from the database.
        var id = await Http.GetJsonAsync<int>("api/Mail/index");
        this.DropVal = id.ToString();
    }
    private async Task OnSelected(ChangeEventArgs<string, User> args)
    {
        if (args.IsInteracted)
        {
            string stringPayload = await Task.Run(() => JsonSerializer.Serialize(args.ItemData));
            HttpContent httpContent = new StringContent(stringPayload, Encoding.UTF8, "application/json");
            await Http.PutJsonAsync("api/Mail/SetUser", args.ItemData);
            uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
        }
    }
}
```

Refer to the combined code for the controller page.

```csharp
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
//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 Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Http.Features;
using Newtonsoft.Json;
using Demo.Shared.DataAccess;
using Demo.Data;

namespace Demo.Server.Controllers
{
    [Route("api/[controller]")]
    [EnableCors("AllowAllOrigins")]
    public class MailController : Controller
    {
        public PhysicalFileProvider operation;
        UserDataAccessLayer db = new UserDataAccessLayer();
        public string basePath;
        string root = "wwwroot\\Files";

        [Obsolete]
        public MailController(IHostingEnvironment hostingEnvironment)
        {
            this.basePath = hostingEnvironment.ContentRootPath;
            this.operation = new PhysicalFileProvider();
        }

        // Processing the File Manager operations.
        [Route("FileOperations")]
        public object FileOperations([FromBody] FileManagerDirectoryContent args)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            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 of 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;
        }
        // uploads the file(s) into a specified path.
        [Route("Upload")]
        public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            FileManagerResponse uploadResponse;
            uploadResponse = operation.Upload(path, uploadFiles, action, null);
            if (uploadResponse.Error != null)
            {
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
            }
            return Content("");
        }

        // downloads the selected file(s) and folder(s).
        [Route("Download")]
        public IActionResult Download(string downloadInput)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
            return operation.Download(args.Path, args.Names, args.Data);
        }

        // gets the image(s) from the given path.
        [Route("GetImage")]
        public IActionResult GetImage(FileManagerDirectoryContent args)
        {
            var rootPath = this.root + "\\" + GetName();
            this.operation.RootFolder(this.basePath + "\\" + rootPath);
            return this.operation.GetImage(args.Path, args.Id, false, null, null);
        }

        // Get user ID from data source.
        [HttpGet("{id}")]
        public object GetIndex()
        {
            // Get the DataSource from Database.
            var data = db.GetUser().ToList();
            int UserId;
            var count = data.Count;
            if (count > 0)
            {
                UserId = (data[data.Count - 1].UserId);
            }
            else
            {
                UserId = 1;
            }
            return UserId;
        }

        // Get username from data source.
        public object GetName()
        {
            // Get the DataSource from Database
            var data = db.GetUser().ToList();
            string name;
            var count = data.Count;
            if (count > 0)
            {
                name = (data[data.Count - 1].Name);
            }
            else
            {
                name = "User 1";
            }
            return name;
        }

        // Update user details into data source.
        [Route("SetUser")]
        public object SetUser([FromBody] User args)
        {
            UserDetails CurrentUser = new UserDetails();
            CurrentUser.Id = 1;
            CurrentUser.UserId = args.UserId;
            CurrentUser.Name = args.Name;
            db.UpdateUser(CurrentUser);
            return null;
        }
    }
}
```

Finally, compile and run these codes. Then, the Blazor File Manager will display the files and folders based on the user login like the following .gif image.

![Blazor File Manager Displaying Files Based on the User Login](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-File-Manager-Displaying-Files-Based-on-the-User-Login.gif)<figcaption>Blazor File Manager Displaying Files Based on the User Login</figcaption>

## GitHub Repository

For information, refer to the code example to [Easily Change the Blazor File Manager Content for Different Users](https://github.com/SyncfusionExamples/Blazor-File-Manager-Dynamic-Content-Loading "Link to Easily Change the Blazor File Manager Content for Different Users demo on GitHub").

## Summary

Thanks for reading! In this blog, we have seen how to change the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Link to Blazor File Manager") display content based on the user login. This component is completely customizable and has flexible usage from the application’s point of view. Check out the Blazor File Manager’s [demos](https://blazor.syncfusion.com/demos/file-manager/overview?theme=bootstrap4 "Link to Blazor File Manager demos on web") and [documentation](https://blazor.syncfusion.com/documentation/file-manager/getting-started/ "Link to Blazor File Manager documentation") for detailed explanations to proceed further. Let’s easily manage our files with the user-friendly features in our Blazor File Manager!

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"), or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/ "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [bUnit for Blazor and How to Integrate it in Azure Pipeline](https://dev.to/sureshmohan/bunit-for-blazor-and-how-to-integrate-it-in-azure-pipeline-pjk-temp-slug-2526719 "Link to bUnit for Blazor and How to Integrate it in Azure Pipeline blog")
- [Creating a Master-Detail View Is Easier with Blazor DataGrid](https://dev.to/syncfusion/creating-a-master-detail-view-is-easier-with-blazor-datagrid-ff0 "Link to Creating a Master-Detail View Is Easier with Blazor DataGrid blog")
- [How to Preview Images in Syncfusion Blazor File Upload Component](https://dev.to/syncfusion/how-to-preview-images-in-syncfusion-blazor-file-upload-component-3ohn "Link to How to Preview Images in Syncfusion Blazor File Upload Component blog")
- [How to Synchronize Google Calendar with Syncfusion Blazor Scheduler](https://dev.to/karthickramasamy08/how-to-synchronize-google-calendar-with-syncfusion-blazor-scheduler-2c6j-temp-slug-7714852 "Link to How to Synchronize Google Calendar with Syncfusion Blazor Scheduler blog")