Vue 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 folders. This function returns different icons based on a file system item's type (file or folder), 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.
App.vue
  • <template>
  • <DxFileManager
  • :customize-thumbnail="customizeIcon">
  • <DxItemView mode="thumbnails"/>
  • <!-- ... -->
  • </DxFileManager>
  • </template>
  • <script>
  • import { DxFileManager, DxItemView } from 'devextreme-vue/file-manager';
  • export default {
  • methods: {
  • customizeIcon(fileManagerItem) {
  • if (fileManagerItem.isDirectory)
  • return 'images/thumbnails/folder.svg';
  • const 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';
  • }
  • }
  • }
  • };
  • </script>