Adding custom item to toolbar in React File manager component

14 Sep 202311 minutes to read

You can modify the items displayed in the toolbar by utilizing the toolbarItems API. To display both default and customized items, it’s essential to assign a unique name to each item. Additionally, you have the flexibility to alter the default items by adjusting properties such as tooltipText, iconCss, Text, suffixIcon and more. This level of customization allows you to tailor the toolbar to your specific requirements and design preferences. The names used in the code example below serve as unique identifiers for default toolbar items, while custom items can be assigned any unique name value to distinguish them from the defaults.

For instance, here’s an example of how to add a custom checkbox to the toolbar using the template property. Here we have modified the default New Folder item and added a custom toolbar item for selection.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, ToolbarItemsDirective, ToolbarItemDirective } from '@syncfusion/ej2-react-filemanager';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
function App() {
    let fileObj;
    let checkbox;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function checkboxTemplate() {
        return (
          <CheckBoxComponent ref={ scope => (checkbox = scope )} label="Select All" checked={false} change={onChange} />
        );
      }
    
    function onChange(args) {
        if (args.checked) {
            fileObj.selectAll(); 
            checkbox.label = 'Unselect All';
        }
        else {
            fileObj.clearSelection();
            checkbox.label = 'Select All';
        }
    }
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" view="Details" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }}>
            <ToolbarItemsDirective>
                <ToolbarItemDirective name= 'NewFolder' text= 'Create folder' prefixIcon= 'e-plus' tooltipText= 'Create folder'/>
                <ToolbarItemDirective name= 'Upload'/>
                <ToolbarItemDirective name= 'SortBy'/>
                <ToolbarItemDirective name= 'Refresh'/>
                <ToolbarItemDirective name= 'Cut'/>
                <ToolbarItemDirective name= 'Copy'/>
                <ToolbarItemDirective name= 'Paste'/>
                <ToolbarItemDirective name= 'Delete'/>
                <ToolbarItemDirective name= 'Download'/>
                <ToolbarItemDirective name= 'Rename'/>
                <ToolbarItemDirective name= 'Select' template={checkboxTemplate}/>
                <ToolbarItemDirective name= 'Selection'/>
                <ToolbarItemDirective name= 'View'/>
                <ToolbarItemDirective name= 'Details'/>
            </ToolbarItemsDirective>
                <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;

app.tsx

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

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

  function checkboxTemplate() {
    return (
      <CheckBoxComponent ref={ scope => ((checkbox as any) = scope as CheckBoxComponent)} label="Select All" checked={false} change={onChange} />
    );
  }

  function onChange(args: ChangeEventArgs) {
    if (args.checked) {
      fileObj.selectAll(); 
      checkbox.label = 'Unselect All';
    }
    else {
      fileObj.clearSelection();
      checkbox.label = 'Select All';
    }
  }
  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => ((fileObj as any) = s as FileManagerComponent)} id="file" view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }}>
                <ToolbarItemsDirective>
                    <ToolbarItemDirective name= 'NewFolder' text= 'Create folder' prefixIcon= 'e-plus' tooltipText= 'Create folder'/>
                    <ToolbarItemDirective name= 'Upload'/>
                    <ToolbarItemDirective name= 'SortBy'/>
                    <ToolbarItemDirective name= 'Refresh'/>
                    <ToolbarItemDirective name= 'Cut'/>
                    <ToolbarItemDirective name= 'Copy'/>
                    <ToolbarItemDirective name= 'Paste'/>
                    <ToolbarItemDirective name= 'Delete'/>
                    <ToolbarItemDirective name= 'Download'/>
                    <ToolbarItemDirective name= 'Rename'/>
                    <ToolbarItemDirective name= 'Select' template={checkboxTemplate}/>
                    <ToolbarItemDirective name= 'Selection'/>
                    <ToolbarItemDirective name= 'View'/>
                    <ToolbarItemDirective name= 'Details'/>
                </ToolbarItemsDirective>
                <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);