Vue 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

<template> <DxFileManager :file-system-provider="fileItems" :customize-thumbnail="customizeIcon" :height="450" > <DxItemView mode="thumbnails"/> <DxPermissions :create="true" :copy="true" :move="true" :delete="true" :rename="true" :upload="true" :download="true" /> </DxFileManager> </template> <script setup lang="ts"> import { DxFileManager, DxPermissions, DxItemView } from 'devextreme-vue/file-manager'; import FileSystemItem from 'devextreme/file_management/file_system_item'; import { fileItems } from './data.ts'; function customizeIcon(fileSystemItem: 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'; } } </script>

export const fileItems = [{ 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, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>