Search results

Nested File Manager in Angular FileManager component

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
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({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
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.path = '/';
        this.filemanagerObj.selectedItems = [];
        this.filemanagerObj.refresh();
    }

    // Uploader will be hidden, if Dialog is opened
    public dialogOpen: EmitType<object> = () => {
        document.getElementById('uploadFileManager').style.display = 'none';
    }
    // Uploader will be shown, if Dialog is closed
    public dialogClose: EmitType<object> = () => {
        document.getElementById('uploadFileManager').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.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.autoUpload = true;
    }

    public ngOnDestroy(): void {
        if (document.querySelector('.sb-demo-section').classList.contains('upload-dialog')) {
            document.querySelector('.sb-demo-section').classList.remove('upload-dialog');
        }
    }
}
import { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '@angular/http';
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 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';

import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService  } from '@syncfusion/ej2-angular-filemanager';

@NgModule({
    imports: [FileManagerModule , HttpModule, JsonpModule, BrowserModule, UploaderModule , DialogModule, ButtonModule, CheckBoxModule ],
declarations: [AppComponent],
providers:[ NavigationPaneService, ToolbarService, DetailsViewService],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<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)">
            </ejs-filemanager>
        </ejs-dialog>
    </div>
</div>

Adding file manager inside the tab

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

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
import { Component } from '@angular/core';
import { FileManagerComponent } from '@syncfusion/ej2-angular-filemanager';
import { TabAllModule } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public headerText: Object = [{ 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 { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { TabAllModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule, CheckBoxModule   } from '@syncfusion/ej2-angular-buttons';
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';

import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService  } from '@syncfusion/ej2-angular-filemanager';

@NgModule({
    imports: [FileManagerModule , HttpModule, JsonpModule, BrowserModule,TabAllModule , ButtonModule, CheckBoxModule ],
declarations: [AppComponent],
providers:[ NavigationPaneService, ToolbarService, DetailsViewService],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section e-tab-section">
    <div class="e-sample-resize-container">
        <!-- Render the Tab Component -->
        <ejs-tab id="tab_default" heightAdjustMode='Auto' [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'>
                            </ejs-filemanager>
                        </ng-template>
                    </e-tabitem>
                </e-tabitems>
        </ejs-tab>
    </div>
</div>