React File Manager - Toolbar and Context Menu

The FileManager component provides the following UI customization properties:

The toolbar property specifies the toolbar's visibility and available commands.
The contextMenu property specifies the context menu's availability and its commands.

The toolbar and context menu support context-invariant and context-sensitive items that can be visible or hidden depending on user action.

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, useRef } from 'react';
import FileManager, {  Permissions, Toolbar, ContextMenu, Item, FileSelectionItem, ItemView, Details, Column, FileManagerRef} from 'devextreme-react/file-manager';import { fileItems, getItemInfo } from './data.ts';​export default function App() {  const fileManagerRef = useRef<FileManagerRef>(null);​  const createFile = useCallback((    fileExtension,    directory = fileManagerRef.current.instance().getCurrentDirectory(),  ) => {    const newItem = {      __KEY__: Date.now(),      name: `New file${fileExtension}`,      isDirectory: false,      size: 0,    };​    if (!directory.isDirectory) {      return false;    }​    let array = null;    if (!directory.dataItem) {      array = fileItems;    } else {      array = directory.dataItem.items;      if (!array) {        array = [];        directory.dataItem.items = array;      }    }​    array.push(newItem);    return true;  }, []);​  const updateCategory = useCallback((newCategory, directory, viewArea: string) => {    let items = null;​    if (viewArea === 'navPane') {      items = [directory];    } else {      items = fileManagerRef.current.instance().getSelectedItems();    }​    items.forEach((item: { dataItem: { category: any; }; }) => {      if (item.dataItem) {        item.dataItem.category = newCategory;      }    });​    return items.length > 0;  }, []);​  const onItemClick = useCallback(({ itemData, viewArea, fileSystemItem }) => {    let updated = false;    const { extension, category } = getItemInfo(itemData.text);​    if (extension) {      updated = createFile(extension, fileSystemItem);    } else if (category !== undefined) {      updated = updateCategory(category, fileSystemItem, viewArea);    }​    if (updated) {      fileManagerRef.current.instance().refresh();    }  }, [createFile, updateCategory]);​  const getNewFileMenuOptions = useCallback(() => ({    items: [      {        text: 'Create new file',        icon: 'plus',        items: [          {            text: 'Text Document',            extension: '.txt',          },          {            text: 'RTF Document',            extension: '.rtf',          },          {            text: 'Spreadsheet',            extension: '.xls',          },        ],      },    ],    onItemClick,  }), [onItemClick]);​  const getChangeCategoryMenuOptions = useCallback(() => ({    items: [      {        text: 'Category',        icon: 'tags',        items: [          {            text: 'Work',            category: 'Work',          },          {            text: 'Important',            category: 'Important',          },          {            text: 'Home',            category: 'Home',          },          {            text: 'None',            category: '',          },        ],      },    ],    onItemClick,  }), [onItemClick]);​  return (    <FileManager      ref={fileManagerRef}      fileSystemProvider={fileItems}      onContextMenuItemClick={onItemClick}      height={450}>      <Permissions        create={true}        delete={true}        rename={true}        download={true}>      </Permissions>      <ItemView showParentFolder={false}>        <Details>          <Column dataField="thumbnail"></Column>          <Column dataField="name"></Column>          <Column dataField="category" caption="Category" width="95"></Column>          <Column dataField="dateModified"></Column>          <Column dataField="size"></Column>        </Details>      </ItemView>      <Toolbar>        <Item name="showNavPane" visible={true} />        <Item name="separator" />        <Item name="create" />        <Item widget="dxMenu" location="before" options={getNewFileMenuOptions()} />        <Item name="refresh" />        <Item name="separator" location="after" />        <Item name="switchView" />​        <FileSelectionItem name="rename" />        <FileSelectionItem name="separator" />        <FileSelectionItem name="delete" />        <FileSelectionItem name="separator" />        <FileSelectionItem widget="dxMenu" location="before" options={getChangeCategoryMenuOptions()} />        <FileSelectionItem name="refresh" />        <FileSelectionItem name="clearSelection" />      </Toolbar>      <ContextMenu>        <Item name="create" />        <Item text="Create new file" icon="plus">          <Item text="Text Document" />          <Item text="RTF Document" />          <Item text="Spreadsheet" />        </Item>        <Item name="rename" beginGroup />        <Item name="delete" />        <Item text="Category" icon="tags" beginGroup>          <Item text="Work" />          <Item text="Important" />          <Item text="Home" />          <Item text="None" />        </Item>        <Item name="refresh" />      </ContextMenu>    </FileManager>  );}​

xxxxxxxxxx
 
import React, { useCallback, useRef } from 'react';
import FileManager, {  Permissions,  Toolbar,  ContextMenu,  Item,  FileSelectionItem,  ItemView,  Details,  Column,} from 'devextreme-react/file-manager';import { fileItems, getItemInfo } from './data.js';​export default function App() {  const fileManagerRef = useRef(null);  const createFile = useCallback((fileExtension, directory = fileManagerRef.current    .instance()    .getCurrentDirectory()) => {    const newItem = {      __KEY__: Date.now(),      name: `New file${fileExtension}`,      isDirectory: false,      size: 0,    };    if (!directory.isDirectory) {      return false;    }    let array = null;    if (!directory.dataItem) {      array = fileItems;    } else {      array = directory.dataItem.items;      if (!array) {        array = [];        directory.dataItem.items = array;      }    }    array.push(newItem);    return true;  }, []);  const updateCategory = useCallback((newCategory, directory, viewArea) => {    let items = null;    if (viewArea === 'navPane') {      items = [directory];    } else {      items = fileManagerRef.current.instance().getSelectedItems();    }    items.forEach((item) => {      if (item.dataItem) {        item.dataItem.category = newCategory;      }    });    return items.length > 0;  }, []);  const onItemClick = useCallback(    ({ itemData, viewArea, fileSystemItem }) => {      let updated = false;      const { extension, category } = getItemInfo(itemData.text);      if (extension) {        updated = createFile(extension, fileSystemItem);      } else if (category !== undefined) {        updated = updateCategory(category, fileSystemItem, viewArea);      }      if (updated) {        fileManagerRef.current.instance().refresh();      }    },    [createFile, updateCategory],  );  const getNewFileMenuOptions = useCallback(    () => ({      items: [        {          text: 'Create new file',          icon: 'plus',          items: [            {              text: 'Text Document',              extension: '.txt',            },            {              text: 'RTF Document',              extension: '.rtf',            },            {              text: 'Spreadsheet',              extension: '.xls',            },          ],        },      ],      onItemClick,    }),    [onItemClick],  );  const getChangeCategoryMenuOptions = useCallback(    () => ({      items: [        {          text: 'Category',          icon: 'tags',          items: [            {              text: 'Work',              category: 'Work',            },            {              text: 'Important',              category: 'Important',            },            {              text: 'Home',              category: 'Home',            },            {              text: 'None',              category: '',            },          ],        },      ],      onItemClick,    }),    [onItemClick],  );  return (    <FileManager      ref={fileManagerRef}      fileSystemProvider={fileItems}      onContextMenuItemClick={onItemClick}      height={450}    >      <Permissions        create={true}        delete={true}        rename={true}        download={true}      ></Permissions>      <ItemView showParentFolder={false}>        <Details>          <Column dataField="thumbnail"></Column>          <Column dataField="name"></Column>          <Column            dataField="category"            caption="Category"            width="95"          ></Column>          <Column dataField="dateModified"></Column>          <Column dataField="size"></Column>        </Details>      </ItemView>      <Toolbar>        <Item          name="showNavPane"          visible={true}        />        <Item name="separator" />        <Item name="create" />        <Item          widget="dxMenu"          location="before"          options={getNewFileMenuOptions()}        />        <Item name="refresh" />        <Item          name="separator"          location="after"        />        <Item name="switchView" />​        <FileSelectionItem name="rename" />        <FileSelectionItem name="separator" />        <FileSelectionItem name="delete" />        <FileSelectionItem name="separator" />        <FileSelectionItem          widget="dxMenu"          location="before"          options={getChangeCategoryMenuOptions()}        />        <FileSelectionItem name="refresh" />        <FileSelectionItem name="clearSelection" />      </Toolbar>      <ContextMenu>        <Item name="create" />        <Item          text="Create new file"          icon="plus"        >          <Item text="Text Document" />          <Item text="RTF Document" />          <Item text="Spreadsheet" />        </Item>        <Item          name="rename"          beginGroup        />        <Item name="delete" />        <Item          text="Category"          icon="tags"          beginGroup        >          <Item text="Work" />          <Item text="Important" />          <Item text="Home" />          <Item text="None" />        </Item>        <Item name="refresh" />      </ContextMenu>    </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,  category: 'Work',  items: [{    name: 'Projects',    isDirectory: true,    category: 'Work',    items: [{      name: 'About.rtf',      isDirectory: false,      size: 1024,    }, {      name: 'Passwords.rtf',      isDirectory: false,      category: 'Important',      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,  category: 'Home',  items: [{    name: 'logo.png',    isDirectory: false,    size: 20480,  }, {    name: 'banner.gif',    isDirectory: false,    size: 10240,  }],}, {  name: 'System',  isDirectory: true,  category: 'Important',  items: [{    name: 'Employees.txt',    isDirectory: false,    category: 'Important',    size: 3072,  }, {    name: 'PasswordList.txt',    isDirectory: false,    category: 'Important',    size: 5120,  }],}, {  name: 'Description.rtf',  isDirectory: false,  size: 1024,}, {  name: 'Description.txt',  isDirectory: false,  size: 2048,}];​const fileExtensions = {  'Text Document': '.txt',  'RTF Document': '.rtf',  Spreadsheet: '.xls',};​const categories = ['Work', 'Important', 'Home', 'None'];​export function getItemInfo(name: string) {  const extension = fileExtensions[name];  const category = extension ?? categories.find((cat) => cat === name);​  return {    extension,    category,  };}​

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,    category: 'Work',    items: [      {        name: 'Projects',        isDirectory: true,        category: 'Work',        items: [          {            name: 'About.rtf',            isDirectory: false,            size: 1024,          },          {            name: 'Passwords.rtf',            isDirectory: false,            category: 'Important',            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,    category: 'Home',    items: [      {        name: 'logo.png',        isDirectory: false,        size: 20480,      },      {        name: 'banner.gif',        isDirectory: false,        size: 10240,      },    ],  },  {    name: 'System',    isDirectory: true,    category: 'Important',    items: [      {        name: 'Employees.txt',        isDirectory: false,        category: 'Important',        size: 3072,      },      {        name: 'PasswordList.txt',        isDirectory: false,        category: 'Important',        size: 5120,      },    ],  },  {    name: 'Description.rtf',    isDirectory: false,    size: 1024,  },  {    name: 'Description.txt',    isDirectory: false,    size: 2048,  },];const fileExtensions = {  'Text Document': '.txt',  'RTF Document': '.rtf',  Spreadsheet: '.xls',};const categories = ['Work', 'Important', 'Home', 'None'];export function getItemInfo(name) {  const extension = fileExtensions[name];  const category = extension ?? categories.find((cat) => cat === name);  return {    extension,    category,  };}​

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

xxxxxxxxxx