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.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>
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.