FileManager can be rendered inside the other components like Tab, Dialog, and more.
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.
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);
The following example demonstrate that the file manager component is placed inside the content area of tab element.
import * as React from 'react';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
export default class App extends React.Component {
constructor(props) {
super(props);
this.select = this.select.bind(this);
}
select(args) {
this.fileObj.refreshLayout();
}
// Template for Pie Chart
template1() {
return (<div className="template">
<div className="cnt-text">Overview</div>
<div className="content">The file manager component contains a context menu for performing file operations, large-icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system.</div>
</div>);
}
template2() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="template">
<div className="content-title">
<div className="cnt-text">File manager with default functionalities</div>
</div>
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" allowDragAndDrop={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>);
}
render() {
let headertext;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (<TabComponent ref={(tab) => { this.tabObj = tab; }} showCloseButton={true} heightAdjustMode='None' height={320} selected={this.select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={this.template1}/>
<TabItemDirective header={headertext[1]} content={this.template2.bind(this)}/>
</TabItemsDirective>
</TabComponent>);
}
}
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>
.e-content .e-item {
font-size: 12px;
padding: 10px;
text-align: justify;
}
.content-title {
height: 50px;
display: table;
margin: 0 auto;
}
.cnt-text {
text-align: center;
font-size: 18px;
font-weight: 600;
}
.content {
font-size:14px
}
import * as React from 'react';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
export default class App extends React.Component<{},{}> {
public fileObj: FileManagerComponent;
public tabObj: TabComponent;
constructor(props: any) {
super(props);
this.select = this.select.bind(this);
}
public select(args: any): void {
this.fileObj.refreshLayout();
}
// Template for Pie Chart
public template1(): JSX.Element {
return(
<div className="template" >
<div className="cnt-text">Overview</div>
<div className="content">The file manager component contains a context menu for performing file operations, large-icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system.</div>
</div>
);
}
public template2(): JSX.Element {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return(
<div className="template" >
<div className="content-title">
<div className="cnt-text">File manager with default functionalities</div>
</div>
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" allowDragAndDrop={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>
);
}
public render() {
let headertext: any;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (
<TabComponent ref={(tab) => { this.tabObj = tab }} showCloseButton={ true } heightAdjustMode='None' height={320} selected={this.select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={ this.template1 as any } />
<TabItemDirective header={headertext[1]} content={ this.template2.bind(this) as any }/>
</TabItemsDirective>
</TabComponent>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);