React File Manager - Overview

$(() => { const provider = new DevExpress.fileManagement.RemoteFileSystemProvider({ endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-images', }); $('#file-manager').dxFileManager({ name: 'fileManager', fileSystemProvider: provider, currentPath: 'Widescreen', permissions: { create: true, copy: true, move: true, delete: true, rename: true, upload: true, download: true, }, onSelectedFileOpened(e) { const popup = $('#photo-popup').dxPopup('instance'); popup.option({ title: e.file.name, contentTemplate: `<img src="${e.file.dataItem.url}" class="photo-popup-image" />`, }); popup.show(); }, }); $('#photo-popup').dxPopup({ maxHeight: 600, hideOnOutsideClick: true, showCloseButton: true, onContentReady(e) { const $contentElement = e.component.content(); $contentElement.addClass('photo-popup-content'); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="file-manager"></div> <div id="photo-popup"></div> </div> </body> </html>

.photo-popup-content { text-align: center; } .photo-popup-content .photo-popup-image { height: 100%; max-width: 100%; }

using DevExtreme.AspNet.Mvc.FileManagement; using System; using System.IO; using System.Net.Http; using System.Net.Http.Headers; using System.Web; using System.Web.Hosting; using System.Web.Http; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class FileManagerImagesApiController : ApiController { static readonly string SampleImagesRelativePath = Path.Combine("Content", "SampleData", "SampleImages"); [System.Web.Http.AcceptVerbs("GET", "POST")] [System.Web.Http.Route("api/file-manager-file-system-images", Name = "FileManagementImagesApi")] public object FileSystem() { var request = new HttpContextWrapper(HttpContext.Current).Request; FileSystemCommand command; Enum.TryParse(request["command"], out command); string arguments = request["arguments"]; var config = new FileSystemConfiguration { Request = request, FileSystemProvider = new PhysicalFileSystemProvider( Path.Combine(HostingEnvironment.ApplicationPhysicalPath, SampleImagesRelativePath), (fileSystemItem, clientItem) => { if(!clientItem.IsDirectory) clientItem.CustomFields["url"] = GetFileItemUrl(fileSystemItem); } ), //uncomment the code below to enable file/directory management //AllowCopy = true, //AllowCreate = true, //AllowMove = true, //AllowDelete = true, //AllowRename = true, //AllowUpload = true, AllowDownload = true, TempDirectory = HttpContext.Current.Server.MapPath("~/App_Data/UploadTemp") }; var processor = new FileSystemCommandProcessor(config); var commandResult = processor.Execute(command, arguments); var result = commandResult.GetClientCommandResult(); return command == FileSystemCommand.Download && commandResult.Success ? CreateDownloadResponse(result) : Request.CreateResponse(result); } string GetFileItemUrl(FileSystemInfo fileSystemItem) { var relativeUrl = "~/" + fileSystemItem.FullName .Replace(HostingEnvironment.ApplicationPhysicalPath, "") .Replace(Path.DirectorySeparatorChar, '/'); return Url.Content(relativeUrl); } HttpResponseMessage CreateDownloadResponse(object result) { var fileContent = result as FileStreamResult; if(fileContent == null) return Request.CreateResponse(result); var response = new HttpResponseMessage() { Content = new StreamContent(fileContent.FileStream) }; response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = fileContent.FileDownloadName }; response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return response; } } }