HGO.ASPNetCore.FileManager (Free & Open Source File Explorer for ASP.Net Core 6+)

HGO.ASPNetCore.FileManager is a free, open source, feature rich and easy to use file explorer/manager component for ASP.Net Core 6 and above with MIT license!

Online Demo

Features:

Manage server's files from client side
Copy & cut & paste functionality
Compress & extract archive files (Rar, Zip, Tar, Tar.GZip, Tar.BZip2, Tar.LZip, Tar.XZ, GZip, 7Zip)
Download & upload
Rename & delete files/folders
Edit text based files with full feature code editor (CodeMirror) (e.g.: .css, .html, .js, ...)
Create new file/folder
Cross platform (Compatible with Windows & Linux & macOS file system)
Search
Ability to enable/disable features
Ability to control disk space usage
and more ...

How to Install:

At first you should install HGO.ASPNetCore.FileManager from NuGet:

Install-Package HGO.ASPNetCore.FileManager

Or via the .NET Core command line interface:

dotnet add package HGO.ASPNetCore.FileManager

Either commands, from Package Manager Console or .NET Core CLI, will download and install HGO.ASPNetCore.FileManager and all required dependencies. Now you need to add HGO.ASPNetCore.FileManager to the ASP.NET Core services container. Open Program.cs and insert the marked lines into Program.cs file:

using HGO.ASPNetCore.FileManager;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

// HGO.AspNetCore.FileManager -------
builder.Services.AddHgoFileManager();
//-----------------------------------

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

// HGO.AspNetCore.FileManager -------
app.UseHgoFileManager();
//-----------------------------------

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Now you need to create an Action Method to handle server side operations, so open (or create) a Controller class and add the following action method:

[HttpPost, HttpGet]
public async Task<IActionResult> HgoApi(string id, string command, string parameters, IFormFile file)
{
    return await _processor.ProcessCommandAsync(id, command, parameters, file);
}

Also you need to inject IFileManagerCommandsProcessor to you controller contractor method with IoC, so edit your controller contractor method like below:

private readonly IFileManagerCommandsProcessor _processor;

public HomeController(IFileManagerCommandsProcessor processor)
{
    _processor = processor;
}

Now you can add HGO.ASPNetCore.FileManager component view to any razor page or view you want:

<div style="height: 550px; margin-bottom:20px">
   @await Component.InvokeAsync("FileManagerComponent", new FileManagerModel()
    {
        Id = "FM1", //an application-wide unique ID
        RootFolder = AppDomain.CurrentDomain.BaseDirectory, //your desired path on server
        ApiEndPoint = Url.Action("HgoApi"), //Url of previously created action method
        Config = new FileManagerConfig() // othe configuration 
    })
</div>

Also you need to reference HGO.ASPNetCore.FileManager JavaScript and CSS files to your view:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    @*HGO.AspNetCore.FileManager Styles*@
    @this.RenderHgoFileManagerCss(true)
    @*---------------------------------*@
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
             @await Component.InvokeAsync("FileManagerComponent", new FileManagerModel()
              {
                  Id = "FM1", //an application-wide unique ID
                  RootFolder = AppDomain.CurrentDomain.BaseDirectory, //your desired path on server
                  ApiEndPoint = Url.Action("HgoApi"), //Url of previously created action method
                  Config = new FileManagerConfig() // othe configuration 
              })
        </main>
    </div>

    @*HGO.AspNetCore.FileManager depends on jQuery, so you need to add jQuery reference before*@
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    @*----------------------------------*@

    @*HGO.AspNetCore.FileManager Scripts*@
    @this.RenderHgoFileManagerJavaScripts()
    @*----------------------------------*@
</body>
</html>

For more information please check the following sample projects:

See installation guide on YouTube:

Note:

HGO.ASPNetCore.FileManager depends on jQuery library, so you need reference jQuery library before calling RenderHgoFileManagerJavaScripts()

Third-party JS libraries which I used in this project:

Thanks to all!