Nested items in EJ2 TypeScript File manager control
26 Apr 202312 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 { Uploader } from '@syncfusion/ej2-inputs';
import { Dialog } from '@syncfusion/ej2-popups';
import { FileManager, FileOpenEventArgs, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
import { Button } from '@syncfusion/ej2-buttons';;
FileManager.Inject(Toolbar, NavigationPane, DetailsView)
// Initialize the Uploader component
let uploadObject: Uploader = new Uploader();
uploadObject.appendTo('#fileupload');
// Initialize the Button component
let btnObj: Button = new Button();
btnObj.appendTo('#openBtn');
// Initialize the Dialog component
let dialogObj: Dialog = new Dialog({
header: 'Open',
showCloseIcon: true,
closeOnEscape: false,
width: '850px',
visible: false,
target: document.getElementById('target'),
animationSettings: { effect: 'None' },
open: dialogOpen,
close: dialogClose
});
dialogObj.appendTo('#dialog');
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
document.getElementById('openBtn').onclick = (): void => {
dialogObj.show();
// Initialize the FileManager component
let filemanagerInstance: FileManager = new FileManager({
ajaxSettings: {
url: hostUrl + 'api/FileManager/FileOperations',
getImageUrl: hostUrl + 'api/FileManager/GetImage',
uploadUrl: hostUrl + 'api/FileManager/Upload',
downloadUrl: hostUrl + 'api/FileManager/Download'
},
allowMultiSelection: false,
fileOpen : onFileOpen
});
filemanagerInstance.appendTo('#filemanager');
dialogOpen();
};
// Uploader will be shown, if Dialog is closed
function dialogClose(): void {
let filemanager: FileManager = (document.getElementById('filemanager') as any).ej2_instances[0];
filemanager.destroy();
document.getElementById('container').style.display = 'block';
}
// Uploader will be hidden, if Dialog is opened
function dialogOpen(): void {
document.getElementById('container').style.display = 'none';
}
// File Manager's fileOpen event function
function onFileOpen(args: FileOpenEventArgs): void {
let file: any = (args as any).fileDetails;
if (file.isFile) {
args.cancel = true;
uploadObject.files = [{name: file.name, size: file.size, type: file.type }];
dialogObj.hide();
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 File Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 File Manager Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div class="control-section">
<div id='container' class="fileupload">
<input type="file" id="fileupload" name="UploadFiles"/>
<button id="openBtn" class="dlgbtn" type="button">Browse...</button>
</div>
<div id='target' class="control-section">
<div id='dialog'>
<div id="filemanager" ></div>
</div>
</div>
</div>
</body>
</html>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 { enableRipple } from '@syncfusion/ej2-base';
import { Tab } from '@syncfusion/ej2-navigations';
import { FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu } from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);
enableRipple(true);
//Initialize Tab component
let tabObj: Tab = new Tab({
heightAdjustMode: 'None',
height: 320,
showCloseButton: true,
selected: onSelect,
});
//Render initialized Tab component
tabObj.appendTo('#tab_orientation');
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
let fileObject: FileManager = new FileManager({
ajaxSettings: {
url: hostUrl + 'api/FileManager/FileOperations',
getImageUrl: hostUrl + 'api/FileManager/GetImage',
uploadUrl: hostUrl + 'api/FileManager/Upload',
downloadUrl: hostUrl + 'api/FileManager/Download'
},
view: 'Details'
});
fileObject.appendTo('#filemanager');
function onSelect(): void {
fileObject.refreshLayout();
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 File Manager</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 File Manager Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id="container">
<div id="tab_orientation">
<div class="e-tab-header">
<div>Overview</div>
<div>File Manager</div>
</div>
<div class="e-content">
<div>
<div class="content-title">
<div class="cnt-text">Overview</div>
</div>
<div style="font-size:14px">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>
<div>
<div class="content-title">
<div class="cnt-text">File manager with default functionalities</div>
</div>
<div id="filemanager"></div>
</div>
</div>
</div>
</div>
</body>
</html>