(ASP.NET Core MVC) Tích Hợp Trình Quản Lý File Vào Website

• Giới thiệu về elFinder
• Tích hợp elFinder vào ASP.NET Core MVC
• Tạo trang quản lý file dùng elFinder
• Tích hợp elFinder vào Summmernote

Giới thiệu elFinder

elFinder (studio-42.github.io/elFinder/) là một tiện tích quản lý file có thể tích hợp vào các Website, nó giốn như CkFinder (CkFinder thời điểm này chưa hỗ trợ chạy với .NET Core). Đối với ASP.NET Core hiện giờ đang có thư viện giúp cho việc tích hợp elFinder, ngoài ra elFinder cũng dễ dàng được sử dụng bởi các trình soạn HTML WYSIWYG như CkEditor, Summernote, TinyMCE

Ta sẽ tích hợp elFinder vào ứng dụng ASP.NET Core MVC bằng cách sử dụng elFinder.NetCore (mã nguồn)s

Trong ứng dụng ASP.NET CORE MVC trước tiên tải các thư viện client-side gồm: jquery, jqueryui, elfinder - ta sẽ sử dụng LibMan trong .NET Core

Tạo file libman.json với nội dung:

{ "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "[email protected]", "destination": "wwwroot/lib/jquery" }, { "library": "[email protected]", "destination": "wwwroot/lib/jqueryui" }, { "library": "[email protected]", "destination": "wwwroot/lib/elfinder" } ] }

Sau đó thực hiện lệnh để tải về từ CDN

libman restore

Ngoài ra nếu bạn có thể tải về theme đẹp hơn thay cho theme mặc định, ví dụ sử dụng theme: elFinder-Material-Theme

Tải về bằng npm

npm install elfinder-material-theme

Sau đó bạn copy toàn bộ thư mục node_modules/elfinder-material-theme vào thư mục wwwroot/css.

Đến đây về thư viện client-side đã đủ, trang HTML muốn sử dụng elFinder cần nạp các file css và js gồm

• ~/lib/jqueryui/themes/base/theme.css
• ~/lib/jqueryui/themes/base/jquery-ui.css
• ~/lib/elfinder/css/elfinder.full.css
• ~/lib/elfinder/css/theme.min.css
• ~/css/elfinder-material-theme/Material/css/theme-gray.css
• ~/lib/jquery/dist/jquery.min.js
• ~/lib/jqueryui/jquery-ui.min.js
• ~/lib/elfinder/js/elfinder.min.js

Tích hợp elFinder vào ASP.NET CORE MVC

Bạn có thể clone mã nguồn elFinder.NetCore từ github và tích hợp vào dự án trong trường hợp muốn tùy biến sâu. Tại đây để đơn giản sẽ sử dụng ngày bản build đóng gói đã đưa lên nuget

Trước tiên tích hợp gói elFinder.NetCore vào dự án bằng lệnh

dotnet add package elFinder.NetCore

Thư viện này tạo ra các chức năng về quản lý file chạy ở Backend, nó cung cấp kết nối đến client-side của elFinder.

Nếu chạy trên macOS bạn có thể cần cài thư viện xử lý đồ họa mono-libgdiplus brew reinstall mono-libgdiplus

Đầu tiên cần xây dựng ra một Controller - cung cấp sự kết nối giữa backend elFinder.NetCore và client-side elFinder. Tạo ra controller đặt tên FileSystemController.cs

using System; using System.IO; using System.Threading.Tasks; using elFinder.NetCore.Drivers.FileSystem; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http.Extensions; using Microsoft.AspNetCore.Mvc; namespace elFinder.NetCore.Web.Controllers { // [Authorize] - bỏ comment user phải đăng nhập mới dùng được [Route("el-finder-file-system")] public class FileSystemController : Controller { IWebHostEnvironment _env; public FileSystemController(IWebHostEnvironment env) => _env = env; // Url để client-side kết nối đến backend // /el-finder-file-system/connector [Route("connector")] public async Task<IActionResult> Connector() { var connector = GetConnector(); return await connector.ProcessAsync(Request); } // Địa chỉ để truy vấn thumbnail // /el-finder-file-system/thumb [Route("thumb/{hash}")] public async Task<IActionResult> Thumbs(string hash) { var connector = GetConnector(); return await connector.GetThumbnailAsync(HttpContext.Request, HttpContext.Response, hash); } private Connector GetConnector() { // Thư mục gốc lưu trữ là wwwwroot/files (đảm bảo có tạo thư mục này) string pathroot = "files"; var driver = new FileSystemDriver(); string absoluteUrl = UriHelper.BuildAbsolute(Request.Scheme, Request.Host); var uri = new Uri(absoluteUrl); // .. ... wwww/files string rootDirectory = Path.Combine(_env.WebRootPath, pathroot); // https://localhost:5001/files/ string url = $"{uri.Scheme}://{uri.Authority}/{pathroot}/"; string urlthumb = $"{uri.Scheme}://{uri.Authority}/el-finder-file-system/thumb/"; var root = new RootVolume( rootDirectory, url, urlthumb) { //IsReadOnly = !User.IsInRole("Administrators") IsReadOnly = false, // Can be readonly according to user's membership permission IsLocked = false, // If locked, files and directories cannot be deleted, renamed or moved Alias = "Files", // Beautiful name given to the root/home folder //MaxUploadSizeInKb = 2048, // Limit imposed to user uploaded file