Nested items in EJ2 TypeScript File Manager control

23 Jan 202518 minutes to read

The File Manager can be rendered inside other controls like Tab, Dialog, and more.

Adding File Manager inside the Dialog

The following example shows the File Manager control rendered inside a 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 Control
let uploadObject: Uploader = new Uploader();
uploadObject.appendTo('#fileupload');

// Initialize the Button Control
let btnObj: Button = new Button();
btnObj.appendTo('#openBtn');

// Initialize the Dialog Control
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/';

let openBtnElement: HTMLElement = document.getElementById('openBtn');

if(openBtnElement) {
    openBtnElement.addEventListener('click', function () {
        dialogObj.show();
        // Initialize the FileManager Control
        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,
            height: '380px'
        });
        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();
    const container = document.getElementById('fileupload');
    if (container) {
        container.style.display = 'block';
    }
}

// Uploader will be hidden, if Dialog is opened
function dialogOpen(): void {
    const container = document.getElementById('fileupload');
    if (container) {
        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 Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/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="upload-wrapper" class="fileupload">
            <span id="drop"> <button id="openBtn" class="dlgbtn" type="button">Browse...</button> </span>
            <input type="file" id="fileupload" name="UploadFiles" />
        </div>
        <div id='target' class="control-section">
            <div id='dialog'>
                <div id="filemanager"></div>
            </div>
        </div>
    </div>
    <style>
        .fileupload {
            max-width: 500px;
            margin: auto;
        }


        #target {
            height: 380px;
        }

        /* csslint ignore:start */
        #dialog {
            top: 20px !important;
            max-height: 500px !important;
        }

        /* csslint ignore:end */

        .e-upload {
            width: 100%;
        }

        .e-file-select-wrap {
            display: none;
        }

        .e-upload {
            border: none;
            margin-top: 15px;
        }

        #drop {
            padding-left: 5%;
        }

        #upload-wrapper {
            min-height: 18px;
            border: 1px dashed #c3c3cc;
            padding: 15px 0;
            margin: 0 auto;
            width: 440px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

Adding File Manager inside the Tab

The following example demonstrates that the File Manager control is placed inside the content area of a 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 Control
let tabObj: Tab = new Tab({
    heightAdjustMode: 'None',
    height: 320,
    showCloseButton: true,
    selected: onSelect,
});
//Render initialized Tab Control
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',
    height: '380px'
});
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 Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/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>
    <style>
        .e-content .e-item {
            font-size: 12px;
            padding: 10px;
            text-align: justify;
        }

        .content-title {
            height: 50px;
            display: table;
            margin: 0 auto;
        }

        .cnt-text {
            vertical-align: middle;
            display: table-cell;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}