Your search did not match any results.
File Manager

Custom Thumbnails

Documentation

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

@(Html.DevExtreme().FileManager() .FileProvider(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.getExtension(); 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) .Remove(true) .Rename(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, items: [ { name: "Projects", isDirectory: true, items: [ { name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, 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, items: [ { name: "logo.png", isDirectory: false, size: 20480 }, { name: "banner.gif", isDirectory: false, size: 10240 } ] }, { name: "System", isDirectory: true, items: [ { name: "Employees.txt", isDirectory: false, size: 3072 }, { name: "PasswordList.txt", isDirectory: false, size: 5120 } ] }, { name: "Description.rtf", isDirectory: false, size: 1024 }, { name: "Description.txt", isDirectory: false, size: 2048 } ];
.dx-filemanager-details-item-thumbnail { height: 18px; width: 18px; }