Custom Thumbnails
The FileManager widget allows you to provide custom thumbnails for a file system's items in Thumbnails mode.
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.
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"
- [fileProvider]="fileItems"
- [customizeThumbnail]="customizeIcon" >
- <dxo-item-view
- mode="thumbnails">
- </dxo-item-view>
- <!-- ... -->
- </dx-file-manager>
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.