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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React, { useCallback, useState } from 'react';
import FileManager, {  Permissions, ItemView, type FileManagerTypes, IItemViewProps,} from 'devextreme-react/file-manager';import { fileItems } from './data.ts';​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<FileManagerTypes.Properties['customizeThumbnail']>((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>  );}​

xxxxxxxxxx
 
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>  );}​

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

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

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

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

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx