DEV Community

Cover image for How to implement a file manager in ASP.NET Core 8.0
GleamTech
GleamTech

Posted on

How to implement a file manager in ASP.NET Core 8.0

Ever needed to manage files, accepts uploads and offer downloads in your ASP.NET Core applications? You may need to display files to users but with different permissions. For example while one user is allowed to upload, the other user is allowed to download only. In modern browsers it's easier to handle uploads, compared to the past however you still can't upload huge files if you don't configure your server correctly and browsers still does not offer any UI for managing files. What if you could integrate a file manager which is customizable, has a modern slick look and can handle all this for you?

This post will focus on ASP.NET Core File Manager which is best on the market for this job, regarding performance and easy, straightforward API. It also supports ASP.NET Classic for legacy applications but in this post we will use the newest and best tech ASP.NET Core.

Step 1 - Create an ASP.NET Core project

  • Open Visual Studio 2022 and create a project by selecting ASP.NET Core Web App (MVC) template. Other ASP.NET Core templates can also be used but we will use this template for this example.
    Create ASP.NET Core Web App (MVC) project

  • Give the project a name e.g. SampleFileManager.
    Give the project a name

  • Choose .NET 8.0 as framework. Older .NET versions are also supported but we will use current LTS version 8.0 for this example.
    Choose .NET 8.0

Step 2 - Add the necessary NuGet packages

  • Right-click on the project in Solution Explorer and select Manage NuGet Packages.
    Right-click on the project in Solution Explorer

  • Search FileUltimate and install the found package.
    Install FileUltimate package

Step 3 - Add the initialization code to ASP.NET Core pipeline

  • Open Program.cs of your project and copy only the marked lines to the same location:

    var builder = WebApplication.CreateBuilder(args);
    
    // Add services to the container.
    builder.Services.AddControllersWithViews();
    
    //----------------------
    //Add GleamTech to the ASP.NET Core services container.
    builder.Services.AddGleamTech();
    //----------------------
    
    var app = builder.Build();
    
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
      app.UseExceptionHandler("/Home/Error");
    }
    
    //----------------------
    //Register GleamTech to the ASP.NET Core HTTP request pipeline.
    app.UseGleamTech();
    //----------------------
    
    app.UseStaticFiles();
    
    app.UseRouting();
    
    app.UseAuthorization();
    
    app.MapControllerRoute(
      name: "default",
      pattern: "{controller=Home}/{action=Index}/{id?}");
    
    app.Run();
    
  • Program.cs of your project will look like this:
    Program.cs

Step 4 - Create a view and controller which will host the file manager

  • Create MyFileManager.cshtml under Views\Home and replace the contents with the following:

    @using GleamTech.AspNet.Core
    @using GleamTech.FileUltimate.AspNet.UI
    
    <!DOCTYPE html>
    @{
        var fileManager = new FileManager
        {
            Width = 800,
            Height = 600,
            Resizable = true
        };
    
        var rootFolder = new FileManagerRootFolder
        {
            Name = "A Root Folder",
            Location = "~/MyRootFolder"
        };
    
        rootFolder.AccessControls.Add(new FileManagerAccessControl
        {
            Path = @"\",
            AllowedPermissions = FileManagerPermissions.Full
        });
    
        fileManager.RootFolders.Add(rootFolder);
    }
    <html>
        <head>
            <title>File Manager</title>
            @this.RenderHead(fileManager)
        </head>
        <body>
            @this.RenderBody(fileManager)
        </body>
    </html>
    

    Copy to View

  • Add a controller method with same name which loads our view:

    public class HomeController : Controller
    {
        public IActionResult MyFileManager()
        {
            return View();
        }
    }
    

    Copy to Controller

Step 5 - Run solution

  • Run solution which will also build the project.
  • When browser is launched, as we didn't add a link to our view in home page, directly type to add our controller url home/MyFileManager in the address bar (so it reads https://localhost:7034/home/MyFileManager).

The output

FileManager is now rendered

FileManager is now rendered in our host view and loaded the given root folder (which is empty for now). For uploading, you can drag and drop files and folders from your desktop directly to folders in FileManager. We can add many root folders to FileManager, each with different permissions.

FileManagerRootFolder.Location property can be set to a web app relative path (this example), a path on disk or network, an Azure Blob container , an Amazon S3 bucket. This is possible by location providers feature. Please refer to docs for more info and sample code on this.

Additional information

Top comments (1)

Collapse
 
rupeshpandey profile image
Rupeshpandey

Very good