React FileManager - 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.
- 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.
- 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[]
items[]
If you have technical questions, please create a support ticket in the DevExpress Support Center.