Views in EJ2 JavaScript File Manager component

30 Jan 202617 minutes to read

The View section displays files and folders for users to browse. Use the view API to set or change the initial view of the File Manager component.

The File Manager supports two view types:

LargeIcons View
Details View

Large Icons view

By default the File Manager renders in Large Icons view. The example below demonstrates the default Large Icons view.

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 File Manager 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'
    },
    height: '380px'
});

// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
<!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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-filemanager/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="filemanager"></div>

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

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

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

Customize Large Icons view

The large icons view layout can be customized using the largeIconsTemplate property, which allows you to display file or folder information, apply custom formatting, and use conditional rendering based on item type. You can customize it further based on your application requirements.

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 File Manager 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'
    },
    height: '380px',
    cssClass: 'e-fm-template-sample',
    largeIconsTemplate: function (item) {
        const formattedDate = item.dateCreated
            ? new Date(item.dateCreated).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            })
            : '';
        const iconClass = getFileIconCssClass(item);
        return `<div class="custom-icon-card">
                <div class="file-header">
                        <div class="file-name" title="${item.name}">${item.name}</div>
                </div>
                <div class="${iconClass}"></div>
                <div class="file-formattedDate">Created on ${formattedDate}</div>
            </div>
        `;
    }
});

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

function getFileIconCssClass(item) {
    if (!item.isFile) return 'e-list-icon e-fe-folder';

    var extensionMap = {
        jpg: 'image',
        jpeg: 'image',
        png: 'image',
        gif: 'image',
        mp3: 'music',
        wav: 'music',
        mp4: 'video',
        avi: 'video',
        doc: 'doc',
        docx: 'docx',
        ppt: 'pptx',
        pptx: 'pptx',
        xls: 'xlsx',
        xlsx: 'xlsx',
        txt: 'txt',
        js: 'js',
        css: 'css',
        html: 'html',
        exe: 'exe',
        msi: 'msi',
        php: 'php',
        xml: 'xml',
        zip: 'zip',
        rar: 'rar',
        pdf: 'pdf',
    };

    var extension = (item.name.split('.').pop() || '').toLowerCase();
    var iconType = extensionMap[extension] || 'unknown';
    return 'e-list-icon e-fe-' + iconType;
}
<!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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-filemanager/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="filemanager"></div>
  <style>
    .e-fm-template-sample .custom-icon-card {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 10px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    .e-fm-template-sample .file-header {
      display: contents;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
    }

    .e-fm-template-sample .file-name {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 110px;
    }

    .e-fm-template-sample .file-formattedDate {
      font-size: 12px;
      margin-top: 8px;
      text-align: center;
      font-weight: 600;
    }

    .e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
      height: 150px;
      width: 135px;
    }
  </style>
  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

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

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

.e-fm-template-sample .custom-icon-card {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.e-fm-template-sample .file-header {
    display: contents;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.e-fm-template-sample .file-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.e-fm-template-sample .file-formattedDate {
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
    font-weight: 600;
}

.e-filemanager.e-fm-template-sample .e-large-icons .e-list-item {
    height: 150px;
    width: 135px;
}

Details view

Details view is an injectable module in the File Manager control, so it should be injected before rendering the File Manager control to avail its functionality. The default appearance of the File Manager control can be changed from large icons to the details view by using the view property. The following example demonstrates the File Manager control with the details view.

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 File Manager 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'
    },
    // Initial view of File Manager is set to details view
    view: "Details",
    height: '380px'
});

// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
<!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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-filemanager/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="filemanager"></div>

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

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

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

Search docs

Ask Syncfusion AI Assistant