Your search did not match any results.
File Manager

Custom Thumbnails

Documentation

The FileManager control allows you to provide custom thumbnails. Handle the customizeThumbnail option to specify how the control 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("~/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 } ];