Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
File Manager

Custom Thumbnails

Documentation

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

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