File Manager - Custom Thumbnails

The FileManager control allows you to provide custom thumbnails. Handle the customizeThumbnail property to specify how the control 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("~/images/thumbnails/folder.svg")'; var fileExtension = fileManagerItem.getFileExtension(); if(fileExtension === ".txt") return '@Url.Content("~/images/thumbnails/doc-txt.svg")'; if(fileExtension === ".rtf") return '@Url.Content("~/images/thumbnails/doc-rtf.svg")'; if(fileExtension === ".xml") return '@Url.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="~/data/fileSystem.js"></script>

using DevExtreme.NETCore.Demos.Models.FileManagement; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class FileManagerController : Controller { public IActionResult 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 } ];