Custom Thumbnails
The FileManager UI component allows you to provide custom thumbnails for a file system's items in Thumbnails mode.
Handle the customizeThumbnail function to specify which icons the UI component should display for files and directories. This function returns different icons based on a file system item's type (file or directory), extension, or other parameters.
You can specify an icon in the following formats:
- The icon's URL.
- The icon's name if the icon is from the DevExtreme icon library.
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries).
- The icon in the Base64 format.
JavaScript
- $(function () {
- $("#file-manager").dxFileManager({
- // ...
- itemView: {
- mode: "thumbnails"
- },
- customizeThumbnail: function (fileManagerItem) {
- if (fileManagerItem.isDirectory)
- return "images/thumbnails/folder.svg";
- var fileExtension = fileManagerItem.getExtension();
- switch (fileExtension) {
- case ".txt":
- return "images/thumbnails/doc-txt.svg";
- case ".rtf":
- return "images/thumbnails/doc-rtf.svg";
- case ".xml":
- return "images/thumbnails/doc-xml.svg";
- }
- }
- });
- });
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.