syncfusion-content · SyncfusionBuild · Dec 18, 2025 · Dec 18, 2025
diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
@@ -1122,6 +1122,7 @@
 <li><a href="/ej2-javascript/file-manager/how-to/custom-file-provider">Implement own service provider</a></li>
 <li><a href="/ej2-javascript/file-manager/how-to/perform-custom-sorting">Perform custom sorting</a></li>
 <li><a href="/ej2-javascript/file-manager/how-to/pass-custom-value-to-server">Pass custom value from client to server</a></li>
+<li><a href="/ej2-javascript/file-manager/how-to/customize-navigation-items">Customize Navigation Items</a></li>
 </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/file-manager/">API Reference</a></li>

diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css
@@ -0,0 +1,16 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}
+
+.fm_template .e-large-icons .e-list-item {
+    width: 190px;
+}
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js
@@ -0,0 +1,33 @@
+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: 'fm_template',
+    largeIconsTemplate: function (item) {
+        const formattedDate = item.dateCreated
+        ? new Date(item.dateCreated).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        })
+        : '';
+        return `
+        <div style="display: flex; flex-direction: column; gap: 2px;">
+            <span><strong>${item.name}</strong></span>
+            <span><strong>Type: </strong>${ item.isFile ? 'File' : 'Folder' }</span>
+            <span><strong>Modified: </strong>${formattedDate}</span>
+        </div>
+    `;
+    }
+});
+
+// render initialized File Manager
+filemanagerInstance.appendTo('#filemanager');
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts
@@ -0,0 +1,35 @@
+import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
+
+FileManager.Inject(Toolbar, NavigationPane, DetailsView)
+
+let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
+// initialize File Manager 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'
+    },
+    height: '380px',
+    cssClass: 'fm_template',
+    largeIconsTemplate: function (item: any) {
+        const formattedDate = item.dateCreated
+        ? new Date(item.dateCreated).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        })
+        : '';
+        return `
+        <div style="display: flex; flex-direction: column; gap: 2px;">
+            <span><strong>${item.name}</strong></span>
+            <span><strong>Type: </strong>${ item.isFile ? 'File' : 'Folder' }</span>
+            <span><strong>Modified: </strong>${formattedDate}</span>
+        </div>
+    `;
+    }
+});
+
+// render initialized File Manager
+filemanagerInstance.appendTo('#filemanager');
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html
@@ -0,0 +1,35 @@
+<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-layouts/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-filemanager/styles/material.css" rel="stylesheet">
+  <script src="https://cdn.syncfusion.com/ej2/20.4.38/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>
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/systemjs.config.js b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js"
+
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html
@@ -0,0 +1,27 @@
+<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-layouts/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/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>
+</head>
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="filemanager"></div>
+</body>
+</html>
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.css b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.css
@@ -0,0 +1,12 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js
@@ -0,0 +1,23 @@
+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'
+    navigationPaneTemplate: function (item) {
+        return `
+        <div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
+            <span class="folder-name" style="margin-left:8px;">${item.name}</span>
+        </div>
+    `;
+    }
+});
+
+// render initialized File Manager
+filemanagerInstance.appendTo('#filemanager');
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.ts b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.ts
@@ -0,0 +1,25 @@
+import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
+
+FileManager.Inject(Toolbar, NavigationPane, DetailsView)
+
+let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
+// initialize File Manager 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'
+    },
+    height: '380px',
+    navigationPaneTemplate: function (item: any) {
+        return `
+        <div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
+            <span class="folder-name" style="margin-left:8px;">${item.name}</span>
+        </div>
+    `;
+    }
+});
+
+// render initialized File Manager
+filemanagerInstance.appendTo('#filemanager');
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/js/index.html b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/js/index.html
@@ -0,0 +1,35 @@
+<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-layouts/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-filemanager/styles/material.css" rel="stylesheet">
+  <script src="https://cdn.syncfusion.com/ej2/20.4.38/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>
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/systemjs.config.js b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/systemjs.config.js
@@ -0,0 +1,44 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js"
+
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/ts/index.html b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/ts/index.html
@@ -0,0 +1,27 @@
+<!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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-layouts/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-grids/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/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>
+</head>
+<body>
+    <div id='loader'>Loading....</div>
+    <div id="filemanager"></div>
+</body>
+</html>
diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/app.ts b/ej2-javascript/code-snippet/file-manager/sequential-upload/app.ts
diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/index.css b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.css
@@ -0,0 +1,12 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}