Backend API
@(Html.DevExtreme().FileManager() .CurrentPath("Widescreen") .FileSystemProvider(provider => provider .Remote() .Url(Url.HttpRouteUrl("FileManagementImagesApi", null))) .Permissions(permissions => permissions .Create(true) .Copy(true) .Move(true) .Delete(true) .Rename(true) .Upload(true) .Download(true)) .OnSelectedFileOpened(@<text> function(e) { var popup = $("#photo-popup").dxPopup("instance"); popup.option({ "title": e.file.name, "contentTemplate": "<img src=\"" + e.file.dataItem.url + "\" class=\"photo-popup-image\" />" }); popup.show(); } </text>) .Height(450)) @(Html.DevExtreme().Popup() .ID("photo-popup") .MaxHeight(600) .OnContentReady(@<text> function(e) { var $contentElement = e.component.content(); $contentElement.addClass("photo-popup-content"); } </text>) .HideOnOutsideClick(true) .ShowCloseButton(true))
using DevExtreme.MVC.Demos.Models.FileManagement; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileManagerController : Controller { public ActionResult Overview() { return View(); } } }
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; } } }
.photo-popup-content { text-align: center; } .photo-popup-content .photo-popup-image { height: 100%; max-width: 100%; }
The component's default security settings provide read-only access to files and directories. Use the permissions property to deny or allow a user to copy, create, move, delete, rename, upload, and download files and directories. You can also specify file restrictions: allowed file extensions (allowedFileExtensions), chunk size (chunkSize) and maximum file size (maxFileSize).
Use the component's itemView property or the view switcher on the toolbar to display file system items as a detailed list or customizable thumbnails.
This demo contains commented out code lines that enable file modification operations. You can uncomment them and configure if necessary.