Nested items in React File manager component
18 Jan 202323 minutes to read
FileManager can be rendered inside the other components like Tab, Dialog, and more.
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.
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';
function App() {
let fileUploadObj;
let dialogObj;
let filemanagerObj;
let animationSettings = { effect: 'None' };
// 'Uploader' will be shown, if Dialog is closed
function dialogClose() {
document.getElementById('uploadFileManager').style.display = 'block';
}
// 'Uploader' will be hidden, if Dialog is opened
function dialogOpen() {
document.getElementById('uploadFileManager').style.display = 'none';
}
// File Manager's fileOpen event function
function onFileOpen(args) {
let file = args.fileDetails;
if (file.isFile) {
args.cancel = true;
if (file.size <= 0) {
file.size = 10000;
}
fileUploadObj.files = [{ name: file.name, size: file.size, type: file.type }];
dialogObj.hide();
}
}
function btnClick() {
dialogObj.show();
filemanagerObj.path = "/";
filemanagerObj.selectedItems = [];
filemanagerObj.refresh();
}
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
let contextmenuItems = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];
return (<div>
<div className="control-section">
<div id='uploadFileManager' className="fileupload">
<UploaderComponent id='fileUpload' type='file' ref={(scope) => { fileUploadObj = scope; }}></UploaderComponent>
<ButtonComponent id="openBtn" onClick={btnClick.bind(this)}>File Browser</ButtonComponent>
</div>
<div id='target' className="control-section">
<DialogComponent width='850px' id='dialog' target={'#target'} ref={(scope) => { dialogObj = scope; }} header="Select a file" showCloseIcon={true} visible={false} open={dialogOpen.bind(this)} close={dialogClose.bind(this)} animationSettings={animationSettings}>
<FileManagerComponent id="filemanager" ref={(scope) => { filemanagerObj = scope; }} ajaxSettings={{
url: hostUrl + "api/FileManager/FileOperations",
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
downloadUrl: hostUrl + 'api/FileManager/Download'
}} allowMultiSelection={false} toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{ file: contextmenuItems, folder: contextmenuItems }} fileOpen={onFileOpen.bind(this)}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</DialogComponent>
</div>
</div>
</div>);
}
export default App;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,AnimationSettingsModel } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let fileUploadObj: UploaderComponent;
let dialogObj: DialogComponent;
let filemanagerObj: FileManagerComponent;
let animationSettings:AnimationSettingsModel = { effect: 'None' };
// 'Uploader' will be shown, if Dialog is closed
function dialogClose(): void {
document.getElementById('uploadFileManager').style.display = 'block';
}
// 'Uploader' will be hidden, if Dialog is opened
function dialogOpen(): void {
document.getElementById('uploadFileManager').style.display = 'none';
}
// File Manager's fileOpen event function
function onFileOpen(args: any): void {
let file = (args as any).fileDetails;
if (file.isFile) {
args.cancel = true;
if (file.size <= 0 ) { file.size = 10000; }
fileUploadObj.files = [{name: file.name, size: file.size, type: file.type }];
dialogObj.hide();
}
}
function btnClick(): void {
dialogObj.show();
filemanagerObj.path ="/";
filemanagerObj.selectedItems =[];
filemanagerObj.refresh();
}
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
let contextmenuItems: string[] = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];
return (
<div>
<div className="control-section">
<div id='uploadFileManager' className="fileupload">
<UploaderComponent id='fileUpload' type='file' ref = {(scope) => {fileUploadObj = scope}}></UploaderComponent>
<ButtonComponent id="openBtn" onClick={ btnClick.bind(this) }>File Browser</ButtonComponent>
</div>
<div id='target' className="control-section">
<DialogComponent width='850px' id='dialog' target={'#target'} ref={(scope) => {(dialogObj as any) = scope}} header="Select a file" showCloseIcon={true}
visible={false} open={dialogOpen.bind(this)} close={dialogClose.bind(this)} animationSettings={animationSettings} >
<FileManagerComponent id="filemanager" ref = {(scope) => {(filemanagerObj as any) = scope}} ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations",
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
downloadUrl: hostUrl + 'api/FileManager/Download'
}} allowMultiSelection={false}
toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }}
contextMenuSettings={{ file: contextmenuItems, folder: contextmenuItems }} fileOpen={onFileOpen.bind(this)}>
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</DialogComponent>
</div>
</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);Adding file manager inside the tab
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';
function App() {
let fileObj;
let tabObj;
function select(args) {
fileObj.refreshLayout();
}
// Template for Pie Chart
function 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>);
}
function 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 => (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>);
}
let headertext;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (<TabComponent ref={(tab) => { tabObj = tab; }} showCloseButton={true} heightAdjustMode='None' height={320} selected={select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={template1}/>
<TabItemDirective header={headertext[1]} content={template2.bind(this)}/>
</TabItemsDirective>
</TabComponent>);
}
export default App;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';
function App() {
let fileObj: FileManagerComponent;
let tabObj: TabComponent;
function select(args: any): void {
fileObj.refreshLayout();
}
// Template for Pie Chart
function 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>
);
}
function 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 => (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>
);
}
let headertext: any;
headertext = [{ text: "Overview" }, { text: "File Manager" }];
return (
<TabComponent ref={(tab) => { tabObj = tab }} showCloseButton={ true } heightAdjustMode='None' height={320} selected={select}>
<TabItemsDirective>
<TabItemDirective header={headertext[0]} content={ template1 as any } />
<TabItemDirective header={headertext[1]} content={ template2.bind(this) as any }/>
</TabItemsDirective>
</TabComponent>
);
}
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);