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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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 } ];