Nested items in Angular File Manager component
1 Oct 202516 minutes to read
The File Manager component can be seamlessly rendered inside other Syncfusion components such as Dialog, Tab, and more. This integration capability allows you to create complex interfaces where file management functionality is needed within different UI contexts.
When nesting the File Manager, consider the parent container’s dimensions as they will affect the File Manager’s display area. You may need to adjust the width and height properties accordingly to ensure proper visibility and usability.
Adding File Manager inside a Dialog
The following example demonstrates how to render the File Manager component inside a Dialog. When users click the browse button in the Uploader element, the File Manager opens within a Dialog component, allowing them to select files from the managed file system. Once files are selected, they can be processed according to your application’s needs.
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewChild, Inject } from '@angular/core';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { FileManagerComponent, FileOpenEventArgs } from '@syncfusion/ej2-angular-filemanager';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
imports: [FileManagerModule, UploaderModule, DialogModule, ButtonModule, CheckBoxModule],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<div class="sample-container">
<div id='uploadFileManager' class="fileupload">
<ejs-uploader #uploadObj id='defaultfileupload'></ejs-uploader>
<button ejs-button id='openBtn' (click)="btnClick()">File Browser</button>
</div>
<div id='target' class="control-section">
<ejs-dialog #dialogObj id='dialog' [visible]='visible' [header]='dialogHeader' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' (open)="dialogOpen()" (close)="dialogClose()"
[target]='target' [width]='dialogWidth'>
<ejs-filemanager #filemanagerObj id='filemanager' [ajaxSettings]='ajaxSettings' [toolbarSettings]='toolbarSettings' [contextMenuSettings]='contextMenuSettings' [allowMultiSelection]='false' (fileOpen)="onFileOpen($event)" height="375px">
</ejs-filemanager>
</ejs-dialog>
</div>
</div>`
})
export class AppComponent {
@ViewChild('uploadObj')
public uploadObj?: UploaderComponent;
@ViewChild('dialogObj')
public dialogObj?: DialogComponent;
@ViewChild('filemanagerObj')
public filemanagerObj?: FileManagerComponent;
public dialogHeader = 'Select a file';
public animationSettings: Object = { effect: 'None' };
public showCloseIcon = true;
public target = '#target';
public visible = false;
public dialogWidth = '850px';
public ajaxSettings?: object;
public contextMenuSettings?: object;
public toolbarSettings?: object;
public hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
public contextmenuItems: string[] = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];
public btnClick: EmitType<object> = () => {
this.dialogObj?.show();
this.dialogOpen();
(this.filemanagerObj as FileManagerComponent).path = '/';
(this.filemanagerObj as FileManagerComponent).selectedItems = [];
(this.filemanagerObj as FileManagerComponent).refresh();
}
// Uploader will be hidden, if Dialog is opened
public dialogOpen: EmitType<object> = () => {
(document.getElementById('uploadFileManager') as HTMLElement).style.display = 'none';
}
// Uploader will be shown, if Dialog is closed
public dialogClose: EmitType<object> = () => {
(document.getElementById('uploadFileManager') as HTMLElement).style.display = 'block';
}
// File Manager's fileOpen event function
public onFileOpen(args: FileOpenEventArgs): void {
let file = (args as any).fileDetails;
if (file.isFile) {
args.cancel = true;
if (file.size <= 0) { file.size = 10000; }
(this.uploadObj as UploaderComponent).files = [{ name: file.name, size: file.size, type: file.type }];
this.dialogObj?.hide();
}
}
public ngOnInit(): void {
this.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'
};
this.toolbarSettings = {
items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']
};
this.contextMenuSettings = {
file: this.contextmenuItems,
folder: this.contextmenuItems
};
(this.uploadObj as UploaderComponent).autoUpload = true;
}
public ngOnDestroy(): void {
if ((document.querySelector('.sb-demo-section') as Element).classList.contains('upload-dialog')) {
(document.querySelector('.sb-demo-section') as Element).classList.remove('upload-dialog');
}
}
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Adding File Manager inside a Tab
The following example demonstrates how to place the File Manager component inside the content area of a Tab element.
import { BrowserModule } from '@angular/platform-browser'
import { TabAllModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { FileManagerComponent } from '@syncfusion/ej2-angular-filemanager';
import { TabAllModule } from '@syncfusion/ej2-angular-navigations';
@Component({
imports: [FileManagerModule, TabAllModule, ButtonModule, CheckBoxModule],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: ` <div class="control-section e-tab-section">
<div class="e-sample-resize-container">
<!-- Render the Tab Component -->
<ejs-tab id="tab_default" heightAdjustMode='Content' [showCloseButton]='enableClose' >
<e-tabitems>
<e-tabitem [header]='headerText[0]'>
<ng-template #content>
<div class="cnt-text" >Overview</div>
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.
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[1]'>
<ng-template #content>
<div class="cnt-text" >Filemanager with Default Functionalities</div>
<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' height="375px">
</ejs-filemanager>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
</div>
</div>`
})
export class AppComponent {
public headerText: Object | any = [{ text: 'Overview' }, { text: 'FileManager' }];
public ajaxSettings?: object;
// Mapping Tab items showCloseButton property
public enableClose: boolean = true;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.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'
};
};
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));