Nested Filemanager in React FileManager component

24 May 2022 / 1 minute to read

FileManager can be rendered inside the other components like Tab, Dialog, and more.

Adding file manager inside the dialog
Adding file manager inside the tab

Adding file manager inside the dialog

The following example shows the file manager component rendered inside the dialog. Click the browse button in the Uploader element to open the File Manager inside the Dialog control.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import { DetailsView, Inject, FileManagerComponent, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
        this.contextmenuItems = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];
        this.state = {
            hideDialog: false
        };
        this.animationSettings = { effect: 'None' };
    }
    // 'Uploader' will be shown, if Dialog is closed
    dialogClose() {
        document.getElementById('uploadFileManager').style.display = 'block';
    }
    // 'Uploader' will be hidden, if Dialog is opened
    dialogOpen() {
        document.getElementById('uploadFileManager').style.display = 'none';
    }
    // File Manager's fileOpen event function
    onFileOpen(args) {
        let file = args.fileDetails;
        if (file.isFile) {
            args.cancel = true;
            if (file.size <= 0) {
                file.size = 10000;
            }
            this.fileUploadObj.files = [{ name: file.name, size: file.size, type: file.type }];
            this.dialogObj.hide();
        }
    }
    btnClick() {
        this.dialogObj.show();
        this.filemanagerObj.path = "/";
        this.filemanagerObj.selectedItems = [];
        this.filemanagerObj.refresh();
    }
    render() {
        return (<div>
        <div className="control-section">
            <div id='uploadFileManager' className="fileupload">
                <UploaderComponent id='fileUpload' type='file' ref={(scope) => { this.fileUploadObj = scope; }}></UploaderComponent>
                <ButtonComponent id="openBtn" onClick={this.btnClick.bind(this)}>File Browser</ButtonComponent>
            </div>
            <div id='target' className="control-section">
                <DialogComponent width='850px' id='dialog' target={'#target'} ref={(scope) => { this.dialogObj = scope; }} header="Select a file" showCloseIcon={true} visible={this.state.hideDialog} open={this.dialogOpen.bind(this)} close={this.dialogClose.bind(this)} animationSettings={this.animationSettings}>
                    <FileManagerComponent id="filemanager" ref={(scope) => { this.filemanagerObj = scope; }} ajaxSettings={{
            url: this.hostUrl + "api/FileManager/FileOperations",
            getImageUrl: this.hostUrl + "api/FileManager/GetImage",
            uploadUrl: this.hostUrl + 'api/FileManager/Upload',
            downloadUrl: this.hostUrl + 'api/FileManager/Download'
        }} allowMultiSelection={false} toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{ file: this.contextmenuItems, folder: this.contextmenuItems }} fileOpen={this.onFileOpen.bind(this)}>
                    <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
                    </FileManagerComponent>
                </DialogComponent>
            </div>
        </div>
      </div>);
    }
}

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

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout 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="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-icons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

.fileupload {
  max-width: 500px;
  margin: auto;
}
#openBtn {
  position: absolute;
  top: 20px;
  left: 43%;
}
#target {
  height: 550px;
}
/* csslint ignore:start */
#dialog {
  top: 20px !important;
  max-height: 500px !important;
}

#uploadFileManager .e-file-drop, #uploadFileManager .e-css.e-btn {
  display: none;
}
/* csslint ignore:end */

import { DetailsView, Inject, FileManagerComponent, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export default class App extends React.Component<{}, {hideDialog: boolean}> {
  public fileUploadObj: UploaderComponent;
  public dialogObj: DialogComponent;
  public filemanagerObj: FileManagerComponent; 
  private animationSettings: Object;
  constructor(props: {}) {
    super(props);
    this.state = {
        hideDialog : false
    };
    this.animationSettings = { effect: 'None' };
   }
   // 'Uploader' will be shown, if Dialog is closed
   public dialogClose(): void {
    document.getElementById('uploadFileManager').style.display = 'block';
  }

  // 'Uploader' will be hidden, if Dialog is opened
  public dialogOpen(): void {
    document.getElementById('uploadFileManager').style.display = 'none';
  }

  // File Manager's fileOpen event function
  public onFileOpen(args: any): void {
    let file = (args as any).fileDetails;
    if (file.isFile) {
        args.cancel = true;
        if (file.size <= 0 ) { file.size = 10000; }
        this.fileUploadObj.files = [{name: file.name, size: file.size, type: file.type }];
        this.dialogObj.hide();
    }
  }

  btnClick(): void {
    this.dialogObj.show();
    this.filemanagerObj.path ="/";
    this.filemanagerObj.selectedItems =[];
    this.filemanagerObj.refresh();
  }
  private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  private contextmenuItems: string[] = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];

  public render() {
    return (
      <div>
        <div className="control-section">
            <div id='uploadFileManager' className="fileupload">
                <UploaderComponent id='fileUpload' type='file' ref = {(scope) => {this.fileUploadObj = scope}}></UploaderComponent>
                <ButtonComponent id="openBtn"  onClick={ this.btnClick.bind(this) }>File Browser</ButtonComponent>
            </div>
            <div id='target' className="control-section">
                <DialogComponent width='850px' id='dialog' target={'#target'} ref={(scope) => {this.dialogObj = scope}} header="Select a file" showCloseIcon={true} 
                    visible={this.state.hideDialog} open={this.dialogOpen.bind(this)} close={this.dialogClose.bind(this)} animationSettings={this.animationSettings} >
                    <FileManagerComponent id="filemanager" ref = {(scope) => {this.filemanagerObj = scope}} ajaxSettings = {{
                        url: this.hostUrl + "api/FileManager/FileOperations",
                        getImageUrl: this.hostUrl + "api/FileManager/GetImage",
                        uploadUrl: this.hostUrl + 'api/FileManager/Upload',
                        downloadUrl: this.hostUrl + 'api/FileManager/Download'
                        }} allowMultiSelection={false} 
                        toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} 
                        contextMenuSettings={{ file: this.contextmenuItems, folder: this.contextmenuItems }} fileOpen={this.onFileOpen.bind(this)}>
                    <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
                    </FileManagerComponent>
                </DialogComponent>
            </div>
        </div>
      </div>
    );
  }
}

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

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

Adding file manager inside the tab

The following example demonstrate that the file manager component is placed inside the content area of tab element.