React FileManager - toolbar

Configures toolbar settings.

Selector: Toolbar
Type: dxFileManagerToolbar

View Demo

DevExtreme File Manager - Toolbar

The FileManager UI component allows you to add default and custom toolbar items.

Predefined Items

Predefined toolbar items include:

  • 'showNavPane' - Shows or hides the navigation panel.
  • 'create' - Creates a new directory.
  • 'upload' - Uploads a file.
  • 'refresh' - Refreshes the file manager content and shows the progress panel.
  • 'download' - Downloads a file.
  • 'move' - Moves files and directories.
  • 'copy' - Copies files and directories.
  • 'rename' - Renames files and directories.
  • 'delete' - Deletes files and directories.
  • 'switchView' - Switches between the 'Details' and 'Thumbnails' file system representation modes.
  • 'clearSelection' - Clears selection from files and directories in the Item View area.

To add a predefined item to the toolbar, specify its name and optional settings ('visible', 'location', 'locateInMenu', 'text', 'icon', 'disabled') and add the item to one of the following collections:

  • items - Displays toolbar items when no file system item is selected.

  • fileSelectionItems - Displays toolbar items when one or more file system items are selected.

NOTE
Note that optional settings for predefined toolbar items should be specified at the same level as the item's name property.
App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import FileManager, { Toolbar, Item, FileSelectionItem } from 'devextreme-react/file-manager';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <FileManager>
  • <Toolbar>
  • {/* Specifies a predefined item's name and optional settings */}
  • <Item name="create" text="Create a directory" icon="newfolder" />
  • {/* Specifies a predefined item's name only */}
  • <Item name="switchView" />
  • <Item name="separator" />
  • {/* Specifies items that are visible when users select files */}
  • <FileSelectionItem name="copy" />
  • <FileSelectionItem name="rename" />
  • </Toolbar>
  • </FileManager>
  • );
  • }
  • }
  • export default App;

Custom Items

To add a custom toolbar item, specify its text and optional settings (for example, a file extension for the toolbar item that creates a new file) and add the item to one of the following collections:

  • items - Displays toolbar items when no file system item is selected.

  • fileSelectionItems - Displays toolbar items when one or more file system items are selected.

The widget property allows you to specify a UI component for a custom toolbar item (dxButton is the default UI component). Use the toolbarItemClick event to handle clicks on custom toolbar items.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  • import FileManager, { Toolbar, Item } from 'devextreme-react/file-manager';
  •  
  • const App = () => {
  • const fileMenuOptions = {
  • 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 onItemClick = (e) => {
  • // ...
  • };
  •  
  • return (
  • <FileManager>
  • <Toolbar>
  • <Item widget="dxMenu" options={this.fileMenuOptions} />
  • </Toolbar>
  • </FileManager>
  • );
  • };
  •  
  • export default App;

fileSelectionItems[]

Configures settings of the toolbar items that are visible when users select files.

Selector: FileSelectionItem
Default Value: [ 'download', 'separator', 'move', 'copy', 'rename', 'separator', 'delete', 'clearSelection', { name: 'separator', location: 'after' }, 'refresh' ]

DevExtreme File Manager - Toolbar - File Selection Items

items[]

Configures toolbar items' settings.

Selector: Item
Default Value: [ 'showNavPane', 'create', 'upload', 'switchView', { name: 'separator', location: 'after' }, 'refresh' ]