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 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.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';
  • }
  • }
  • }