Syncfusion AI Assistant

How can I help you?

Customization in React File Manager component

19 May 202624 minutes to read

The File Manager component allows customizing its functionalities like, context menu, searching, uploading, toolbar using APIs. Given below are some of the functionalities that can be customized in the File Manager,

Context menu customization
Details view customization
Navigation pane customization
Show/Hide file extension
Show/Hide hidden items
Show/Hide thumbnail images in large icons view
Toolbar customization
Upload customization
Tooltip customization

The context menu settings like, items to be displayed on files, folders and layout click and visibility can be customized using contextMenuSettings property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";

    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" height="375px" view="Details" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} contextMenuSettings={{
            file: ['Open', '|', 'Details'],
            folder: ['Open', '|', 'Details'],
            layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
        }}>
              <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
            </FileManagerComponent>
      </div>
  </div>);
}
export default App;
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

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

  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file" height="375px" view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }}
              contextMenuSettings = {{ 
                file: ['Open', '|', 'Details'],
                folder: ['Open', '|', 'Details'],
                layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
              }} >
              <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
            </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Details view customization

The details view settings like, column width, header text, template for each field can be customized using detailsViewSettings property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" view="Details" height="375px" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} detailsViewSettings={{
            columns: [
                { field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template: '${name}' },
                { field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
                { field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
            ]
        }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
      </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="Details" height="375px" ajaxSettings = {{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} 
        detailsViewSettings ={ 
          { 
            columns : [
              {field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}'},
              {field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'},
              { field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'}
            ]
          }
        }>
        <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

The navigation pane settings like, minimum and maximum width, visibility and sort order can be customized using navigationPaneSettings property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} navigationPaneSettings={{ maxWidth: '850px', minWidth: '140px', visible: true, sortOrder: 'Ascending'}}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" ajaxSettings = {{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
          }} navigationPaneSettings ={{ maxWidth: '850px', minWidth: '140px', visible: true, sortOrder: 'Ascending' }}  >
            <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Show/Hide file extension

The file extensions are displayed in the File Manager by default. This can be hidden by disabling the showFileExtension property.

In File Manager fileLoad and fileOpen events are triggered before the file/folder is rendered and before the file/folder is opened respectively. These events can be utilized to perform operations before a file/folder is rendered or opened.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function onBeforeFileLoad(args) {
        console.log(args.fileDetails.name + " is loading");
    }
    function onBeforeFileOpen(args) {
        console.log(args.fileDetails.name + " is opened");
    }
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showFileExtension={false} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} fileLoad={onBeforeFileLoad.bind(this)} fileOpen={onBeforeFileOpen.bind(this)}>
          <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  function onBeforeFileLoad(args: any) {
    console.log(args.fileDetails.name + " is loading");
  }
  function onBeforeFileOpen(args: any) {
    console.log(args.fileDetails.name + " is opened");
  }
  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showFileExtension={false} ajaxSettings = {{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
          }} fileLoad={onBeforeFileLoad.bind(this)} fileOpen={onBeforeFileOpen.bind(this)} >
          <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Show/Hide hidden items

The File Manager provides support to show/hide the hidden items by enabling/disabling the showHiddenItems property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showHiddenItems={true} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }}>
          <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showHiddenItems={true} ajaxSettings = {{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} >
          <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Show/Hide thumbnail images in large icons view

The thumbnail images are displayed in the File Manager’s large icons view by default. This can be hidden by disabling the showThumbnail property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showThumbnail={false} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }}>
          <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" showThumbnail={false}  ajaxSettings = {{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
          }} >
          <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

The toolbar settings like, items to be displayed in toolbar and visibility can be customized using toolbarSettings property.

app.jsx
app.tsx
index.jsx
index.tsx
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/";
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" view="Details" height="375px" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} toolbarSettings={{ items: ['NewFolder', 'Refresh', 'View', 'Details'] }}>
                <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;
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/";

  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file" height="375px" view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }}
              toolbarSettings = {
                { items: ['NewFolder', 'Refresh', 'View', 'Details']}
              } >
                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Upload customization

The upload settings like, minimum and maximum file size and enabling auto upload can be customized using uploadSettings property.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" 
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} 
            uploadSettings={{ maxFileSize: 233332, minFileSize: 120, autoUpload: true }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
        </FileManagerComponent>
    </div>);
}
export default App;
import {  DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  
  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" 
          ajaxSettings = {{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
          }} 
          uploadSettings={{ maxFileSize: 233332, minFileSize: 120, autoUpload: true}}>
          <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

The tooltip value can be customized by adding extra content to the title of the toolbar, navigation pane, details view and large icons of the File Manager element.

app.jsx
app.tsx
index.jsx
index.tsx
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    let fileObj;
    let tooltipObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function onTooltipBeforeRender(args) {
        const buttonId = select('button', args.target).id;
        let description = '';
        switch (buttonId) {
            case fileObj.element.id + '_tb_newfolder':
                description = 'Create a new folder';
                break;
            case fileObj.element.id + '_tb_upload':
                description = 'Upload new files';
                break;
            case fileObj.element.id + '_tb_cut':
                description = 'Cut files and folders from the current location';
                break;
            case fileObj.element.id + '_tb_copy':
                description = 'Copy files and folders from the current location';
                break;
            case fileObj.element.id + '_tb_paste':
                description = 'Paste files and folders in the current location';
                break;
            case fileObj.element.id + '_tb_delete':
                description = 'Delete selected files and folders';
                break;
            case fileObj.element.id + '_tb_download':
                description = 'Download selected files and folders';
                break;
            case fileObj.element.id + '_tb_rename':
                description = 'Rename selected file or folder';
                break;
            case fileObj.element.id + '_tb_sortby':
                description = 'Change the file sorting order';
                break;
            case fileObj.element.id + '_tb_refresh':
                description = 'Refresh the current location';
                break;
            case fileObj.element.id + '_tb_selection':
                description = 'Following items are currently selected:';
                for (let i = 0; i < fileObj.selectedItems.length; i++) {
                    description = description + '</br>' + fileObj.selectedItems[i];
                }
                break;
            case fileObj.element.id + '_tb_view':
                description = 'Switch the layout view';
                break;
            case fileObj.element.id + '_tb_details':
                description = 'Get the details of the seletced items';
                break;
            default:
                description = '';
                break;
        }
        tooltipObj.content = args.target.getAttribute('title') + '</br>' + description;
    }
    function fileLoad(args) {
        const target = args.element;
        if (args.module === 'DetailsView') {
            const element = select('[title]', args.element);
            const title = getValue('name', args.fileDetails) +
                '\n' + getValue('dateModified', args.fileDetails);
            element.setAttribute('title', title);
        }
        else if (args.module === 'LargeIconsView') {
            const title = getValue('name', args.fileDetails) +
                '\n' + getValue('dateModified', args.fileDetails);
            target.setAttribute('title', title);
        }
    }
    return (<TooltipComponent id="template-tootip" ref={s => (tooltipObj = s)} target="#file_toolbar [title]" beforeRender={onTooltipBeforeRender}>
            <div className="filemanager-container">
            {/* File Manager element */}
                <FileManagerComponent ref={s => (fileObj = s)} height="375px" id="file" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + 'api/FileManager/GetImage',
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + 'api/FileManager/FileOperations'
        }} fileLoad={fileLoad}>
                    <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
                </FileManagerComponent>
            </div>
        </TooltipComponent>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';

function App() {
    let fileObj: FileManagerComponent;
    let tooltipObj: TooltipComponent;
    let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";   
    function onTooltipBeforeRender(args: TooltipEventArgs): void {
      const buttonId: string = select('button', args.target).id;
      let description: string = '';
        switch (buttonId) {
            case fileObj.element.id + '_tb_newfolder':
                description = 'Create a new folder';
                break;
            case fileObj.element.id + '_tb_upload':
                description = 'Upload new files';
                break;
            case fileObj.element.id + '_tb_cut':
                description = 'Cut files and folders from the current location';
                break;
            case fileObj.element.id + '_tb_copy':
                description = 'Copy files and folders from the current location';
                break;
            case fileObj.element.id + '_tb_paste':
                description = 'Paste files and folders in the current location';
                break;
            case fileObj.element.id + '_tb_delete':
                description = 'Delete selected files and folders';
                break;
            case fileObj.element.id + '_tb_download':
                description = 'Download selected files and folders';
                break;
            case fileObj.element.id + '_tb_rename':
                description = 'Rename selected file or folder';
                break;
            case fileObj.element.id + '_tb_sortby':
                description = 'Change the file sorting order';
                break;
            case fileObj.element.id + '_tb_refresh':
                description = 'Refresh the current location';
                break;
            case fileObj.element.id + '_tb_selection':
                description = 'Following items are currently selected:';
                for (let i: number = 0; i < fileObj.selectedItems.length; i++) {
                    description = description + '</br>' + fileObj.selectedItems[i];
                }
            break;
            case fileObj.element.id + '_tb_view':
                description = 'Switch the layout view';
                break;
            case fileObj.element.id + '_tb_details':
                description = 'Get the details of the seletced items';
                break;
            default:
                description = '';
                break;
        }
      tooltipObj.content = args.target.getAttribute('title') + '</br>' + description;
    }
    function fileLoad(args: any): void {
      const target: Element = args.element;
      if (args.module==='DetailsView') {
          const element: Element = select('[title]', args.element);
          const title: string = getValue('name', args.fileDetails) +
              '\n' + getValue('dateModified', args.fileDetails);
          element.setAttribute('title', title);
      } else if (args.module==='LargeIconsView') {
          const title: string = getValue('name', args.fileDetails) +
              '\n' + getValue('dateModified', args.fileDetails);
          target.setAttribute('title', title);
      }
    }

    return (
        <TooltipComponent id="template-tootip" ref={ s => (tooltipObj = s as TooltipComponent)} target="#file_toolbar [title]" beforeRender={onTooltipBeforeRender} >
            <div className="filemanager-container">
            {/* File Manager element */}
                <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file" height="375px"
                    ajaxSettings = {{
                        downloadUrl: hostUrl +'api/FileManager/Download',
                        getImageUrl: hostUrl +'api/FileManager/GetImage',
                        uploadUrl: hostUrl +'api/FileManager/Upload',
                        url: hostUrl + 'api/FileManager/FileOperations'         
                    }} fileLoad={fileLoad}>
                    <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
                </FileManagerComponent>
            </div>
        </TooltipComponent>
    );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Maintaining Component State on Page Reload

The File Manager supports maintaining the component state on page reload. This can be achieved by enabling enablePersistence property, which maintains the following:

Previous view of the File Manager - View
Previous path of the File Manager - Path
Previous selected items of the File Manager - SelectedItems

For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success, success event will be triggered and failure event will be triggered if the request gets failed.

App.jsx
App.tsx
index.jsx
index.tsx
index.html
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';

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

    function onSuccess() {
        console.log("Ajax request successful");
    }
    function onFailure() {
        console.log("Ajax request has failed");
    }
    return (<div className="control-section">
        <FileManagerComponent id="file" view="LargeIcons" height="375px" enablePersistence={true} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} success={onSuccess} failure={onFailure}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';

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

  function onSuccess() {
    console.log("Ajax request successful");
  }
  function onFailure() {
    console.log("Ajax request has failed");
  }
  return (
    <div className="control-section">
      <FileManagerComponent id="file" view="LargeIcons" height="375px" enablePersistence={true} ajaxSettings={{
        downloadUrl: hostUrl + 'api/FileManager/Download',
        getImageUrl: hostUrl + "api/FileManager/GetImage",
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        url: hostUrl + "api/FileManager/FileOperations"
      }} success={onSuccess} failure={onFailure} >
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React File Manager Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-icons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-react-filemanager/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

Note: The files of the current folder opened in the File Manager can be refreshed programatically by calling the refreshFiles method.

Specifying the Current Path of the File Manager

The current path of the File Manager can be specified initially or dynamically using the path property.

The following code snippet demonstrates specifying the current path in File Manager on rendering.

src/App.tsx

import {  FileManagerComponent } from '@syncfusion/ej2-react-filemanager';

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" path="/Pictures" ajaxSettings = {{
          url: hostUrl + "api/FileManager/FileOperations"
        }} />
    </div>
  );
}
export default App;

src/App.jsx

import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';

function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div className="control-section">
        <FileManagerComponent id="file" path="/Pictures" ajaxSettings={{
            url: hostUrl + "api/FileManager/FileOperations"
        }}/>
    </div>);
}
export default App;

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Customization in React File Manager component

Context menu customization

Details view customization

Navigation pane customization

Show/Hide file extension

Show/Hide hidden items

Show/Hide thumbnail images in large icons view

See Also

Upload customization

Tooltip customization

Maintaining Component State on Page Reload

Specifying the Current Path of the File Manager

How can I help you?

Customization in React File Manager component

Context menu customization

Details view customization

Navigation pane customization

Show/Hide file extension

Show/Hide hidden items

Show/Hide thumbnail images in large icons view

Toolbar customization

See Also

Upload customization

Tooltip customization

Maintaining Component State on Page Reload

Specifying the Current Path of the File Manager