JavaScript/jQuery FileManager - UI Customization

Custom Thumbnails

View Demo

The FileManager UI component allows you to provide custom thumbnails for a file system's items in Thumbnails mode.

DevExtreme FileManager - Custom Thumbnails

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";
  • }
  • }
  • });
  • });