Custom Thumbnails - React File Manager

import React, { useCallback, useState } from 'react'; import FileManager, { Permissions, ItemView, } from 'devextreme-react/file-manager'; import type { FileManagerTypes, IItemViewProps } from 'devextreme-react/file-manager'; import { fileItems } from './data.ts'; interface CustomFileSystemItem { isDirectory: boolean; getFileExtension: () => string; } export default function App() { const [itemViewMode, setItemViewMode] = useState<IItemViewProps['mode']>('thumbnails'); const onOptionChanged = useCallback((e: FileManagerTypes.OptionChangedEvent) => { if (e.fullName === 'itemView.mode') { setItemViewMode(e.value); } }, [setItemViewMode]); const customizeIcon = useCallback((fileSystemItem: CustomFileSystemItem) => { 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'; } }, []); return ( <FileManager fileSystemProvider={fileItems} customizeThumbnail={customizeIcon} height={450} onOptionChanged={onOptionChanged} > <ItemView mode={itemViewMode} /> <Permissions create={true} copy={true} move={true} delete={true} rename={true} upload={true} download={true} /> </FileManager> ); }

import React, { useCallback, useState } from 'react'; import FileManager, { Permissions, ItemView } from 'devextreme-react/file-manager'; import { fileItems } from './data.js'; export default function App() { const [itemViewMode, setItemViewMode] = useState('thumbnails'); const onOptionChanged = useCallback( (e) => { if (e.fullName === 'itemView.mode') { setItemViewMode(e.value); } }, [setItemViewMode], ); const customizeIcon = useCallback((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'; } }, []); return ( <FileManager fileSystemProvider={fileItems} customizeThumbnail={customizeIcon} height={450} onOptionChanged={onOptionChanged} > <ItemView mode={itemViewMode} /> <Permissions create={true} copy={true} move={true} delete={true} rename={true} upload={true} download={true} /> </FileManager> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

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 React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

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, }, ];

<!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.min.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

React File Manager - Custom Thumbnails