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