Angular File Manager - Custom Thumbnails

The FileManager component allows you to provide custom thumbnails. Handle the customizeThumbnail property to specify how the component presents files in folders.

Backend API

<dx-file-manager id="fileManager" [fileSystemProvider]="fileItems" [customizeThumbnail]="customizeIcon" height="450" > <dxo-file-manager-item-view mode="thumbnails"> </dxo-file-manager-item-view> <dxo-file-manager-permissions [create]="true" [copy]="true" [move]="true" [delete]="true" [rename]="true" [upload]="true" [download]="true" > </dxo-file-manager-permissions> </dx-file-manager>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxFileManagerModule } from 'devextreme-angular'; import { Service, FileItem } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: [`app/app.component.css`], selector: 'demo-app', templateUrl: './app.component.html', providers: [Service], preserveWhitespaces: true, imports: [ DxFileManagerModule, ], }) export class AppComponent { fileItems: FileItem[]; constructor(service: Service) { this.fileItems = service.getFileItems(); } customizeIcon(fileSystemItem) { if (fileSystemItem.isDirectory) { return '../../../../images/thumbnails/folder.svg'; } const fileExtension = fileSystemItem.getFileExtension(); 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'; default: return '../../../../images/thumbnails/doc-txt.svg'; } } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

import { Injectable } from '@angular/core'; export class FileItem { name: string; isDirectory: boolean; size?: number; items?: FileItem[]; } const fileItems: FileItem[] = [{ name: 'Documents', isDirectory: true, items: [{ name: 'Projects', isDirectory: true, items: [{ name: 'About.rtf', isDirectory: false, size: 1024, }, { name: 'Passwords.rtf', isDirectory: false, size: 2048, }], }, { name: 'About.xml', isDirectory: false, size: 1024, }, { name: 'Managers.rtf', isDirectory: false, size: 2048, }, { name: 'ToDo.txt', isDirectory: false, size: 3072, }], }, { name: 'Images', isDirectory: true, items: [{ name: 'logo.png', isDirectory: false, size: 20480, }, { name: 'banner.gif', isDirectory: false, size: 10240, }], }, { name: 'System', isDirectory: true, items: [{ name: 'Employees.txt', isDirectory: false, size: 3072, }, { name: 'PasswordList.txt', isDirectory: false, size: 5120, }], }, { name: 'Description.rtf', isDirectory: false, size: 1024, }, { name: 'Description.txt', isDirectory: false, size: 2048, }]; @Injectable() export class Service { getFileItems(): FileItem[] { return fileItems; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-gantt.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>