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

This content originally appeared on DEV Community and was authored by GleamTech

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.
Give the project a name e.g. SampleFileManager.
Choose .NET 8.0 as framework. Older .NET versions are also supported but we will use current LTS version 8.0 for this example.

Step 2 - Add the necessary NuGet packages

Right-click on the project in Solution Explorer and select Manage NuGet Packages.
Search FileUltimate and install the found 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:

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>

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

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

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 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

This content originally appeared on DEV Community and was authored by GleamTech

Print Share Comment Cite Upload Translate Updates

APA

GleamTech | Sciencx (2024-08-10T20:42:28+00:00) How to implement a file manager in ASP.NET Core 8.0. Retrieved from https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/

MLA

" » How to implement a file manager in ASP.NET Core 8.0." GleamTech | Sciencx - Saturday August 10, 2024, https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/

HARVARD

GleamTech | Sciencx Saturday August 10, 2024 » How to implement a file manager in ASP.NET Core 8.0., viewed ,<https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/>

VANCOUVER

GleamTech | Sciencx - » How to implement a file manager in ASP.NET Core 8.0. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/

CHICAGO

" » How to implement a file manager in ASP.NET Core 8.0." GleamTech | Sciencx - Accessed . https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/

IEEE

" » How to implement a file manager in ASP.NET Core 8.0." GleamTech | Sciencx [Online]. Available: https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/. [Accessed: ]

rf:citation

» How to implement a file manager in ASP.NET Core 8.0 | GleamTech | Sciencx | https://www.scien.cx/2024/08/10/how-to-implement-a-file-manager-in-asp-net-core-8-0/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.