All docs
V20.1
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

UI Customization

Custom Thumbnails

View Demo

The FileManager widget 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 widget 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.
jQuery
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";
            }
        }
    });
}); 
Angular
app.component.ts
app.component.html
import { DxFileManagerModule } from 'devextreme-angular';    
// ...
export class AppComponent {
    // ...
    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";
        }
    }
}
<dx-file-manager id="fileManager"
    [fileSystemProvider]="fileItems"
    [customizeThumbnail]="customizeIcon" >
    <dxo-item-view
        mode="thumbnails">
    </dxo-item-view>
    <!-- ... -->    
</dx-file-manager>
Vue
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>
React
App.js
import React from 'react';
import FileManager, { ItemView } from 'devextreme-react/file-manager';
class App extends React.Component {
    render() {
        return (
        <FileManager
            customizeThumbnail={this.customizeIcon}>
            <ItemView
                mode="thumbnails"
            />
            {/* ... */}
        </FileManager>
        );
    }
    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';
        }
    }
}