Nested items in EJ2 JavaScript File Manager control

24 Jan 202517 minutes to read

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

Adding File Manager inside the Dialog
Adding File Manager inside the Tab

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.

index.js
index.html
index.css
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane);
// Initialize the Uploader Control
var uploadObject = new ej.inputs.Uploader({});
uploadObject.appendTo('#fileupload');

// Initialize the Button Control
var btnObj = new ej.buttons.Button({});
btnObj.appendTo('#openBtn');

// Initialize the Dialog Control
var dialogObj = new ej.popups.Dialog({
    header: 'Select a file',
    showCloseIcon: true,
    closeOnEscape: false,
    width: '850px',
    visible: false,
    target: document.getElementById('target'),
    animationSettings: { effect: 'None' },
    open: dialogOpen,
    close: dialogClose
});
dialogObj.appendTo('#dialog');

var contextmenuItems = ['Open', '|', 'Cut', 'Copy', 'Delete', 'Rename', '|', 'Details'];

// Initialize the FileManager Control
var filemanagerInstance = new ej.filemanager.FileManager({
    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,
    height: '380px'
});
filemanagerInstance.appendTo('#filemanager');

document.getElementById('openBtn').onclick = function() {
    dialogObj.show();
    dialogOpen();
    filemanagerInstance.path = '/';
    filemanagerInstance.selectedItems = [];
    filemanagerInstance.refresh();
};

// 'Uploader' will be shown, if Dialog is closed
function dialogClose() {
    document.getElementById('fileupload').style.display = 'block';
}

// 'Uploader' will be hidden, if Dialog is opened
function dialogOpen() {
    document.getElementById('fileupload').style.display = 'none';
}

// File Manager's fileOpen event function
function onFileOpen(args) {
    var file = args.fileDetails;
    if (file.isFile) {
        args.cancel = true;
        if (file.size <= 0 ) { file.size = 10000; }
        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/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <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>
    
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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.

index.js
index.html
index.css
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane);

//Initialize Tab component
var tabObj = new ej.navigations.Tab({
    heightAdjustMode: 'None',
    height: 320,
    showCloseButton: true,
    selected: onSelect
});
//Render initialized Tab component
tabObj.appendTo('#tab_orientation');

// initialize File Manager control
var fileObject = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    },
    height: '380px'
});

// render initialized File Manager
fileObject.appendTo('#filemanager');

function onSelect() {
    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/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <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>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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%;
}

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Nested items in EJ2 JavaScript File Manager control

Adding File Manager inside the Dialog

Adding File Manager inside the Tab