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.0as 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
FileUltimateand install the found package.
Step 3 - Add the initialization code to ASP.NET Core pipeline
-
Open
Program.csof 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.csof your project will look like this:
Step 4 - Create a view and controller which will host the file manager
-
Create
MyFileManager.cshtmlunderViews\Homeand 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/MyFileManagerin the address bar (so it readshttps://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.
Top comments (1)
Very good