Adding custom item to toolbar in React File manager component

18 Jan 20236 minutes to read

The toolbar items can be customized using the toolbarSettings API and toolbarClick event.

The following example shows adding a custom item in the toolbar.

The new toolbar button is added using toolbarSettings. The toolbarClick event is used to add an event handler to the new toolbar button.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function toolbarCreate(args) {
        for (var i = 0; i < args.items.length; i++) {
            if (args.items[i].text === 'Custom') {
                args.items[i].prefixIcon = 'e-icons e-fe-tick';
            }
        }
    }
    function toolbarClick(args) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom toolbar item');
        }
    }
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" view="Details" toolbarClick={toolbarClick} toolbarCreate={toolbarCreate} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} toolbarSettings={{ items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }}>
                <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;

app.tsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let fileObj: FileManagerComponent;
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";

  function toolbarCreate(args: any): void {
    for(var i=0;i<args.items.length;i++) {
      if (args.items[i].text === 'Custom') {
          args.items[i].prefixIcon= 'e-icons e-fe-tick';
      }
  }
  }
  function toolbarClick(args: any): void {
    if (args.item.text === 'Custom') {
      alert('You have clicked custom toolbar item');
    }
  }
  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => ((fileObj as any) = s as FileManagerComponent)} id="file" view="Details" toolbarClick={ toolbarClick } toolbarCreate={toolbarCreate}
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }}
              toolbarSettings = {
                { items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']}
              } >
                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;

index.jsx

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

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);