File Manager - Custom Thumbnails

The FileManager component allows you to provide custom thumbnails. Handle the customizeThumbnail property to specify how the component presents files in folders.

Backend API

@(Html.DevExtreme().FileManager() .FileSystemProvider(new JS("fileSystem")) .ItemView(view => view.Mode(FileManagerItemViewMode.Thumbnails)) .CustomizeThumbnail(@<text> function(fileManagerItem) { if(fileManagerItem.isDirectory) return '@Url.Content("~/Content/images/thumbnails/folder.svg")'; var fileExtension = fileManagerItem.getFileExtension(); if(fileExtension === ".txt") return '@Url.Content("~/Content/images/thumbnails/doc-txt.svg")'; if(fileExtension === ".rtf") return '@Url.Content("~/Content/images/thumbnails/doc-rtf.svg")'; if(fileExtension === ".xml") return '@Url.Content("~/Content/images/thumbnails/doc-xml.svg")'; return null; } </text>) .Permissions(permissions => permissions .Create(true) .Copy(true) .Move(true) .Delete(true) .Rename(true) .Upload(true) .Download(true)) .Height(450)) <script src="~/Scripts/data/fileSystem.js"></script>

using DevExtreme.MVC.Demos.Models.FileManagement; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileManagerController : Controller { public ActionResult CustomThumbnails() { return View(); } } }

var fileSystem = [ { name: "Documents", isDirectory: true, category: "Work", items: [ { name: "Projects", isDirectory: true, category: "Work", items: [ { name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, category: "Important", size: 2048 } ] }, { name: "About.xml", isDirectory: false, size: 1024 }, { name: "Managers.rtf", isDirectory: false, size: 2048 }, { name: "ToDo.txt", isDirectory: false, size: 3072 } ], }, { name: "Images", isDirectory: true, category: "Home", items: [ { name: "logo.png", isDirectory: false, size: 20480 }, { name: "banner.gif", isDirectory: false, size: 10240 } ] }, { name: "System", isDirectory: true, category: "Important", items: [ { name: "Employees.txt", isDirectory: false, category: "Important", size: 3072 }, { name: "PasswordList.txt", isDirectory: false, category: "Important", size: 5120 } ] }, { name: "Description.rtf", isDirectory: false, size: 1024 }, { name: "Description.txt", isDirectory: false, size: 2048 } ];