@syncfusion/ej2-filemanager 31.2.2 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.2
-*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _filemanager from '@syncfusion/ej2-filemanager';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-filemanager",
-  "version": "31.2.2",
+  "version": "32.1.19",
   "description": "Essential JS 2 FileManager Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,16 +8,16 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-filemanager.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.2",
-    "@syncfusion/ej2-buttons": "~31.2.2",
-    "@syncfusion/ej2-data": "~31.2.2",
-    "@syncfusion/ej2-grids": "~31.2.2",
-    "@syncfusion/ej2-inputs": "~31.2.2",
-    "@syncfusion/ej2-layouts": "~31.2.2",
-    "@syncfusion/ej2-lists": "~31.2.2",
-    "@syncfusion/ej2-navigations": "~31.2.2",
-    "@syncfusion/ej2-popups": "~31.2.2",
-    "@syncfusion/ej2-splitbuttons": "~31.2.2"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-grids": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-layouts": "~32.1.19",
+    "@syncfusion/ej2-lists": "~32.1.19",
+    "@syncfusion/ej2-navigations": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19",
+    "@syncfusion/ej2-splitbuttons": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

package/src/file-manager/base/classes.d.ts

@@ -185,6 +185,10 @@ export declare const ICON_GRID: string;
 /** @hidden */
 export declare const ICON_LARGE: string;
 /** @hidden */
+export declare const ICON_FOLDER: string;
+/** @hidden */
+export declare const ICON_FILE: string;
+/** @hidden */
 export declare const ICON_BREADCRUMB: string;
 /** @hidden */
 export declare const ICON_CLEAR: string;

package/src/file-manager/base/classes.js

@@ -185,6 +185,10 @@ export var ICON_GRID = 'e-icons e-fe-grid';
 /** @hidden */
 export var ICON_LARGE = 'e-icons e-fe-large';
 /** @hidden */
+export var ICON_FOLDER = 'e-icons e-folder';
+/** @hidden */
+export var ICON_FILE = 'e-icons e-file-format';
+/** @hidden */
 export var ICON_BREADCRUMB = 'e-icons e-fe-breadcrumb';
 /** @hidden */
 export var ICON_CLEAR = 'e-icons e-fe-clear';

package/src/file-manager/base/file-manager-model.d.ts

@@ -34,6 +34,32 @@ export interface FileManagerModel extends ComponentModel{
      */
     allowDragAndDrop?: boolean;
 
+    /**
+     * Specifies a template to render customized content for all the nodes. If the `navigationPaneTemplate` property
+     * is set, the template content overrides the displayed node text in the File Manager navigation pane.
+     * The property accepts a template string or HTML element ID holding the content.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    navigationPaneTemplate?: string | Function;
+
+    /**
+     * Specifies a template to render customized content for all the files or folders in the large icons view. If the `largeIconsTemplate` property
+     * is set, the template content overrides the displayed files or folders text in the File Manager large icons view. The property accepts template string
+     * or HTML element ID holding the content.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    largeIconsTemplate?: string | Function;
+
     /**
      * Enables or disables the multiple files selection of the file manager.
      *
@@ -267,7 +293,8 @@ export interface FileManagerModel extends ComponentModel{
      *  maxFileSize: 30000000,
      *  allowedExtensions: '',
      *  autoClose: false,
-     *  directoryUpload: false
+     *  directoryUpload: false,
+     *  sequentialUpload: false
      * }
      */
     uploadSettings?: UploadSettingsModel;

package/src/file-manager/base/file-manager.d.ts

@@ -185,6 +185,30 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default false
      */
     allowDragAndDrop: boolean;
+    /**
+     * Specifies a template to render customized content for all the nodes. If the `navigationPaneTemplate` property
+     * is set, the template content overrides the displayed node text in the File Manager navigation pane.
+     * The property accepts a template string or HTML element ID holding the content.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    navigationPaneTemplate: string | Function;
+    /**
+     * Specifies a template to render customized content for all the files or folders in the large icons view. If the `largeIconsTemplate` property
+     * is set, the template content overrides the displayed files or folders text in the File Manager large icons view. The property accepts template string
+     * or HTML element ID holding the content.
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    largeIconsTemplate: string | Function;
     /**
      * Enables or disables the multiple files selection of the file manager.
      *
@@ -393,7 +417,8 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      *  maxFileSize: 30000000,
      *  allowedExtensions: '',
      *  autoClose: false,
-     *  directoryUpload: false
+     *  directoryUpload: false,
+     *  sequentialUpload: false
      * }
      */
     uploadSettings: UploadSettingsModel;
@@ -667,6 +692,7 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     private onCancel;
     private onClearing;
     private onSelected;
+    private allowOrDenyUpload;
     private onFileUploadSuccess;
     private onChunkUploadComplete;
     private onUploadSuccess;

package/src/file-manager/base/file-manager.js

@@ -441,6 +441,7 @@ var FileManager = /** @class */ (function (_super) {
             maxFileSize: this.uploadSettings.maxFileSize,
             allowedExtensions: this.uploadSettings.allowedExtensions,
             directoryUpload: this.uploadSettings.directoryUpload,
+            sequentialUpload: this.uploadSettings.sequentialUpload,
             fileListRendering: this.onFileListRender.bind(this)
         });
         this.uploadObj.appendTo('#' + this.element.id + CLS.UPLOAD_ID);
@@ -577,8 +578,34 @@ var FileManager = /** @class */ (function (_super) {
             createDeniedDialog(this, details, events.permissionUpload);
             return;
         }
+        if (this.allowOrDenyUpload(args, details)) {
+            args.cancel = true;
+            createDeniedDialog(this, details, events.permissionUpload);
+            return;
+        }
         this.uploadDialogObj.show();
     };
+    FileManager.prototype.allowOrDenyUpload = function (args, uploadDetails) {
+        var permission = getValue('permission', uploadDetails);
+        if (isNOU(args) || isNOU(permission) || isNOU(getValue('uploadContentFilter', permission))) {
+            return false;
+        }
+        var hasFolder = args.filesData.some(function (f) {
+            var name = !isNOU(f.name) ? f.name : '';
+            return name.includes('/') || name.includes('\\');
+        });
+        var hasFile = args.filesData.some(function (f) {
+            var name = !isNOU(f.name) ? f.name : '';
+            return !(name.includes('/') || name.includes('\\'));
+        });
+        if (hasFolder && getValue('uploadContentFilter', permission) === 1) {
+            return true;
+        }
+        if (hasFile && getValue('uploadContentFilter', permission) === 2) {
+            return true;
+        }
+        return false;
+    };
     FileManager.prototype.onFileUploadSuccess = function (args) {
         this.uploadedCount = this.uploadedCount + args.count;
         if (this.uploadSettings.autoClose && (this.uploadingCount === this.uploadedCount)) {
@@ -830,7 +857,9 @@ var FileManager = /** @class */ (function (_super) {
                     this.dragSelectedItems.push(item.querySelector('.e-drag-text').textContent);
                 }
                 if (this.showItemCheckBoxes) {
-                    item.querySelector('.e-frame').classList.add('e-check');
+                    if (item.querySelector('.e-frame')) {
+                        item.querySelector('.e-frame').classList.add('e-check');
+                    }
                 }
             }
         }
@@ -1019,6 +1048,14 @@ var FileManager = /** @class */ (function (_super) {
                     this.fileSystemData = newProp.fileSystemData;
                     requiresRefresh = true;
                     break;
+                case 'navigationPaneTemplate':
+                    this.navigationPaneTemplate = newProp.navigationPaneTemplate;
+                    requiresRefresh = true;
+                    break;
+                case 'largeIconsTemplate':
+                    this.largeIconsTemplate = newProp.largeIconsTemplate;
+                    requiresRefresh = true;
+                    break;
             }
         }
         if (requiresRefresh) {
@@ -1386,6 +1423,12 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], FileManager.prototype, "allowDragAndDrop", void 0);
+    __decorate([
+        Property()
+    ], FileManager.prototype, "navigationPaneTemplate", void 0);
+    __decorate([
+        Property()
+    ], FileManager.prototype, "largeIconsTemplate", void 0);
     __decorate([
         Property(true)
     ], FileManager.prototype, "allowMultiSelection", void 0);

package/src/file-manager/base/interface.d.ts

@@ -1,7 +1,7 @@
 import { Component, EmitType, L10n } from '@syncfusion/ej2-base';
 import { Dialog, ButtonPropsModel } from '@syncfusion/ej2-popups';
 import { FileManagerModel } from '../base/file-manager-model';
-import { ToolbarSettingsModel, AjaxSettingsModel, ToolbarItemModel } from '../models/index';
+import { ToolbarSettingsModel, AjaxSettingsModel, ToolbarItemModel, UploadSettingsModel } from '../models/index';
 import { DetailsViewSettingsModel } from '../models/details-view-settings-model';
 import { TreeView, ContextMenu, MenuItemModel, ItemModel } from '@syncfusion/ej2-navigations';
 import { DetailsView } from '../layout/details-view';
@@ -929,6 +929,9 @@ export interface IFileManager extends Component<HTMLElement> {
     isMac: boolean;
     oldView: string;
     oldPath: string;
+    navigationPaneTemplate: string | Function;
+    largeIconsTemplate: string | Function;
+    uploadSettings: UploadSettingsModel;
 }
 /** @hidden */
 export interface ITreeView extends Component<HTMLElement> {

package/src/file-manager/common/operations.js

@@ -355,6 +355,7 @@ function triggerRenameOperation(parent, data, eventArgs) {
                 var oldName = fileData.name;
                 fileData.name = args.newName;
                 updateChildrenFilterPath(parent, fileData.id, oldName, args.newName);
+                parent.responseData.error = null;
             }
             else {
                 var message = 'Cannot rename' + args.itemData[0].name + 'to' + args.newName + ': destination already exists.';

package/src/file-manager/common/utility.d.ts

@@ -27,27 +27,30 @@ export declare function updatePath(node: HTMLLIElement, data: Object, instance:
  * @param {Element | Node} element - specifies the element.
  * @param {string} text - specifies the text.
  * @param {boolean} hasId - specifies the id.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string} returns the path.
  * @private
  */
-export declare function getPath(element: Element | Node, text: string, hasId: boolean): string;
+export declare function getPath(element: Element | Node, text: string, hasId: boolean, instance?: IFileManager): string;
 /**
  * Functions for get path id in FileManager
  *
  * @param {Element} node - specifies the node element.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns the path ids.
  * @private
  */
-export declare function getPathId(node: Element): string[];
+export declare function getPathId(node: Element, instance?: IFileManager): string[];
 /**
  * Functions for get path names in FileManager
  *
  * @param {Element} element - specifies the node element.
  * @param {string} text - specifies the text.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns the path names.
  * @private
  */
-export declare function getPathNames(element: Element, text: string): string[];
+export declare function getPathNames(element: Element, text: string, instance?: IFileManager): string[];
 /**
  * Functions for get path id in FileManager
  *
@@ -55,10 +58,11 @@ export declare function getPathNames(element: Element, text: string): string[];
  * @param {string} text - specifies the text.
  * @param {boolean} isId - specifies the id.
  * @param {boolean} hasId - checks the id exists.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns parent element.
  * @private
  */
-export declare function getParents(element: Element, text: string, isId: boolean, hasId?: boolean): string[];
+export declare function getParents(element: Element, text: string, isId: boolean, hasId?: boolean, instance?: IFileManager): string[];
 /**
  * Functions for generate path
  *

package/src/file-manager/common/utility.js

@@ -55,9 +55,9 @@ export function updatePath(node, data, instance) {
     var text = getValue('name', data);
     var id = node.getAttribute('data-id');
     var newText = isNOU(id) ? text : id;
-    instance.setProperties({ path: getPath(node, newText, instance.hasId) }, true);
-    instance.pathId = getPathId(node);
-    instance.pathNames = getPathNames(node, text);
+    instance.setProperties({ path: getPath(node, newText, instance.hasId, instance) }, true);
+    instance.pathId = getPathId(node, instance);
+    instance.pathNames = getPathNames(node, text, instance);
 }
 /**
  * Functions for get path in FileManager
@@ -65,11 +65,12 @@ export function updatePath(node, data, instance) {
  * @param {Element | Node} element - specifies the element.
  * @param {string} text - specifies the text.
  * @param {boolean} hasId - specifies the id.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string} returns the path.
  * @private
  */
-export function getPath(element, text, hasId) {
-    var matched = getParents(element, text, false, hasId);
+export function getPath(element, text, hasId, instance) {
+    var matched = getParents(element, text, false, hasId, instance);
     var path = '/';
     var len = matched.length - (2);
     for (var i = len; i >= 0; i--) {
@@ -81,11 +82,12 @@ export function getPath(element, text, hasId) {
  * Functions for get path id in FileManager
  *
  * @param {Element} node - specifies the node element.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns the path ids.
  * @private
  */
-export function getPathId(node) {
-    var matched = getParents(node, node.getAttribute('data-uid'), true);
+export function getPathId(node, instance) {
+    var matched = getParents(node, node.getAttribute('data-uid'), true, false, instance);
     var ids = [];
     for (var i = matched.length - 1; i >= 0; i--) {
         ids.push(matched[i]);
@@ -97,11 +99,12 @@ export function getPathId(node) {
  *
  * @param {Element} element - specifies the node element.
  * @param {string} text - specifies the text.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns the path names.
  * @private
  */
-export function getPathNames(element, text) {
-    var matched = getParents(element, text, false);
+export function getPathNames(element, text, instance) {
+    var matched = getParents(element, text, false, false, instance);
     var names = [];
     for (var i = matched.length - 1; i >= 0; i--) {
         names.push(matched[i]);
@@ -115,16 +118,20 @@ export function getPathNames(element, text) {
  * @param {string} text - specifies the text.
  * @param {boolean} isId - specifies the id.
  * @param {boolean} hasId - checks the id exists.
+ * @param {IFileManager} instance - specifies the control instance.
  * @returns {string[]} returns parent element.
  * @private
  */
-export function getParents(element, text, isId, hasId) {
+export function getParents(element, text, isId, hasId, instance) {
     var matched = [text];
     var el = element.parentNode;
     while (!isNOU(el)) {
         if (matches(el, '.' + CLS.LIST_ITEM)) {
-            var parentText = isId ? el.getAttribute('data-uid') : (hasId ? el.getAttribute('data-id') :
-                select('.' + CLS.LIST_TEXT, el).textContent);
+            var data = [{}];
+            if (!isNOU(instance) && !isNOU(instance.navigationpaneModule) && !isNOU(instance.navigationpaneModule.treeObj)) {
+                data = instance.navigationpaneModule.treeObj.getTreeData(el);
+            }
+            var parentText = isId ? el.getAttribute('data-uid') : (hasId ? el.getAttribute('data-id') : getValue('name', data[0]));
             matched.push(parentText);
         }
         el = el.parentNode;
@@ -393,7 +400,7 @@ export function getTargetModule(parent, element) {
             tartgetModule = 'largeiconsview';
         }
         else if (element.classList.contains('e-fullrow') ||
-            element.classList.contains('e-icon-expandable')) {
+            element.classList.contains('e-icon-expandable') || element.classList.contains('e-text-content')) {
             tartgetModule = 'navigationpane';
         }
         else if (closest(element, '.e-address-list-item')) {
@@ -1529,9 +1536,19 @@ export function doDownloadFiles(parent, data, newIds) {
  * @private
  */
 export function createDeniedDialog(parent, data, action) {
-    var message = getValue('message', getValue('permission', data));
+    var permission = getValue('permission', data);
+    var message = getValue('message', permission);
+    var restriction = getValue('uploadContentFilter', permission) === 1 ? 'Folder Upload' : 'File Upload';
     if (message === '') {
-        message = getLocaleText(parent, 'Access-Message').replace('{0}', getValue('name', data)).replace('{1}', action);
+        if (!isNOU(permission) && getValue('upload', permission) && getValue('uploadContentFilter', permission) === 1) {
+            message = getLocaleText(parent, 'FolderUpload-Access-Message').replace('{0}', getValue('name', data)).replace('{1}', restriction);
+        }
+        else if (!isNOU(permission) && getValue('upload', permission) && getValue('uploadContentFilter', permission) === 2) {
+            message = getLocaleText(parent, 'FileUpload-Access-Message').replace('{0}', getValue('name', data)).replace('{1}', restriction);
+        }
+        else {
+            message = getLocaleText(parent, 'Access-Message').replace('{0}', getValue('name', data)).replace('{1}', action);
+        }
     }
     var response = {
         error: {

package/src/file-manager/layout/details-view.js

@@ -169,6 +169,10 @@ var DetailsView = /** @class */ (function () {
             this.parent.toolbarModule.toolbarObj.portals) {
             this.parent['portals'] = this.parent['portals'].concat(this.parent.toolbarModule.toolbarObj.portals);
         }
+        if (this.parent.portals && this.parent.navigationpaneModule &&
+            this.parent.navigationpaneModule.treeObj && this.parent.navigationpaneModule.treeObj.portals) {
+            this.parent['portals'] = this.parent['portals'].concat(this.parent.navigationpaneModule.treeObj.portals);
+        }
         this.parent.notify('renderReactTemplate', this.parent['portals']);
         this.parent['renderReactTemplates']();
     };
@@ -246,7 +250,7 @@ var DetailsView = /** @class */ (function () {
                 _loop_1(i, len);
             }
         }
-        var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
+        var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '70' : '56');
         var icon = {
             field: 'type', width: iWidth, minWidth: iWidth,
             template: initializeCSPTemplate(function (data) {

package/src/file-manager/layout/large-icons-view.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ListBase } from '@syncfusion/ej2-lists';
 import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, Draggable, Fetch } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, addClass, removeClass, Touch, isVisible } from '@syncfusion/ej2-base';
@@ -112,6 +113,10 @@ var LargeIconsView = /** @class */ (function () {
                 itemCreated: this.onItemCreated.bind(this),
                 enableHtmlSanitizer: this.parent.enableHtmlSanitizer
             };
+            if (this.parent.largeIconsTemplate) {
+                this.listObj.template = this.parent.largeIconsTemplate;
+                this.listObj.templateID = this.parent.element.id + '_largeIconsTemplate';
+            }
             this.items = [];
             this.items = this.renderList(args);
             if (this.parent.sortComparer && this.parent.sortBy !== 'None') {
@@ -124,9 +129,10 @@ var LargeIconsView = /** @class */ (function () {
             if (this.parent.enableVirtualization && this.allItems.length > 0 && !isNOU(this.parent.virtualizationModule)) {
                 this.parent.virtualizationModule.setUIVirtualization();
             }
-            this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
+            this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj, null, null, this.parent);
             this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
             this.element.appendChild(this.listElements);
+            this.parent.renderReactTemplates();
             if (this.imageEventArgsMap.size > 0) {
                 this.loadImages();
             }
@@ -315,15 +321,17 @@ var LargeIconsView = /** @class */ (function () {
     };
     LargeIconsView.prototype.onItemCreated = function (args) {
         args.item.removeAttribute('aria-level');
-        if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
-            var textEle = args.item.querySelector('.' + CLS.LIST_TEXT);
-            var txt = getValue('name', args.curData);
-            var type = getValue('type', args.curData);
-            if (txt.indexOf(type) !== -1) {
-                textEle.innerHTML = txt.substr(0, txt.length - type.length);
+        if (!this.parent.largeIconsTemplate) {
+            if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
+                var textEle = args.item.querySelector('.' + CLS.LIST_TEXT);
+                var txt = getValue('name', args.curData);
+                var type = getValue('type', args.curData);
+                if (txt.indexOf(type) !== -1) {
+                    textEle.innerHTML = txt.substr(0, txt.length - type.length);
+                }
             }
+            this.renderCheckbox(args);
         }
-        this.renderCheckbox(args);
         var eventArgs = {
             element: args.item,
             fileDetails: args.curData,
@@ -961,8 +969,7 @@ var LargeIconsView = /** @class */ (function () {
         }
     };
     LargeIconsView.prototype.updateType = function (item) {
-        var folder = select('.' + CLS.FOLDER, item);
-        this.parent.isFile = isNOU(folder) ? true : false;
+        this.parent.isFile = getValue('isFile', this.getItemObject(item));
     };
     /* istanbul ignore next */
     LargeIconsView.prototype.keydownActionHandler = function (e) {

package/src/file-manager/layout/navigation-pane.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';
 import { isNullOrUndefined as isNOU, select, setValue, getValue, Draggable } from '@syncfusion/ej2-base';
 import { KeyboardEvents, closest } from '@syncfusion/ej2-base';
@@ -69,10 +80,7 @@ var NavigationPane = /** @class */ (function () {
             setValue('_fm_htmlAttr', attr, rootData);
         }
         this.treeObj = new BaseTreeView({
-            fields: {
-                dataSource: [rootData], id: '_fm_id', parentID: '_fm_pId', expanded: '_fm_expanded', selected: '_fm_selected', text: 'name',
-                hasChildren: 'hasChild', iconCss: '_fm_icon', htmlAttributes: '_fm_htmlAttr', tooltip: 'name'
-            },
+            fields: __assign({ dataSource: [rootData], id: '_fm_id', parentID: '_fm_pId', expanded: '_fm_expanded', selected: '_fm_selected', text: 'name', hasChildren: 'hasChild' }, (isNOU(this.parent.navigationPaneTemplate) && { iconCss: '_fm_icon' }), { htmlAttributes: '_fm_htmlAttr', tooltip: 'name' }),
             enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
             sortOrder: this.parent.navigationPaneSettings.sortOrder,
             nodeSelecting: this.onNodeSelecting.bind(this),
@@ -83,7 +91,8 @@ var NavigationPane = /** @class */ (function () {
             nodeEditing: this.onNodeEditing.bind(this),
             drawNode: this.onDrowNode.bind(this),
             enableRtl: this.parent.enableRtl,
-            dataBound: this.addDragDrop.bind(this)
+            dataBound: this.addDragDrop.bind(this),
+            nodeTemplate: this.parent.navigationPaneTemplate
         });
         this.treeObj.isStringTemplate = true;
         this.treeObj.appendTo('#' + this.parent.element.id + CLS.TREE_ID);
@@ -95,7 +104,7 @@ var NavigationPane = /** @class */ (function () {
             if (this.parent.allowDragAndDrop && isNOU(this.dragObj)) {
                 this.dragObj = new Draggable(this.treeObj.element, {
                     cursorAt: this.parent.dragCursorPosition,
-                    dragTarget: '.' + CLS.FULLROW,
+                    dragTarget: '.' + CLS.FULLROW + ',.' + CLS.TEXT_CONTENT,
                     distance: 5,
                     dragArea: this.parent.element,
                     drag: draggingHandler.bind(this, this.parent),
@@ -116,7 +125,7 @@ var NavigationPane = /** @class */ (function () {
     };
     NavigationPane.prototype.dragHelper = function (args) {
         var dragTarget = args.sender.target;
-        if (!dragTarget.classList.contains(CLS.FULLROW)) {
+        if (!dragTarget.classList.contains(CLS.FULLROW) && !dragTarget.classList.contains(CLS.TEXT_CONTENT)) {
             return null;
         }
         var dragLi = closest(dragTarget, 'li');
@@ -139,7 +148,7 @@ var NavigationPane = /** @class */ (function () {
     NavigationPane.prototype.getDropPath = function (node, text) {
         var id = node.getAttribute('data-id');
         var newText = this.parent.hasId ? id : text;
-        return getPath(node, newText, this.parent.hasId);
+        return getPath(node, newText, this.parent.hasId, this.parent);
     };
     NavigationPane.prototype.onDrowNode = function (args) {
         var eventArgs = {
@@ -148,6 +157,16 @@ var NavigationPane = /** @class */ (function () {
             module: 'NavigationPane'
         };
         this.parent.trigger('fileLoad', eventArgs);
+        if (this.parent && this.parent.portals && this.treeObj && this.treeObj.portals) {
+            for (var i = 0; i < this.treeObj.portals.length; i++) {
+                if (this.parent.portals.indexOf(this.treeObj.portals[i]) === -1) {
+                    this.parent.portals.push(this.treeObj.portals[i]);
+                }
+            }
+            if (this.parent.isReact) {
+                this.parent.renderReactTemplates();
+            }
+        }
     };
     NavigationPane.prototype.addChild = function (files, target, prevent) {
         var directories = getDirectories(files);
@@ -248,7 +267,7 @@ var NavigationPane = /** @class */ (function () {
         }
         this.parent.searchedItems = [];
         if (!args.isInteracted && !this.isRightClick && !this.isSameNodeClicked && !this.isPathDragged && !this.isRenameParent) {
-            this.parent.pathId = getPathId(args.node);
+            this.parent.pathId = getPathId(args.node, this.parent);
             return;
         }
         this.activeNode = args.node;
@@ -261,7 +280,7 @@ var NavigationPane = /** @class */ (function () {
             updatePath(args.node, this.parent.itemData[0], this.parent);
         }
         else {
-            this.parent.pathId = getPathId(args.node);
+            this.parent.pathId = getPathId(args.node, this.parent);
             this.parent.visitedItem = args.node;
         }
         if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
@@ -287,11 +306,11 @@ var NavigationPane = /** @class */ (function () {
         }
         if (args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
             this.isNodeExpandCalled = true;
-            var text = getValue('text', args.nodeData);
+            var nodeData = this.getTreeData(getValue('id', args.nodeData));
             var id = args.node.getAttribute('data-id');
             var isId = isNOU(id) ? false : true;
-            var newText = isNOU(id) ? text : id;
-            var path = getPath(args.node, newText, isId);
+            var newText = isNOU(id) ? nodeData[0].name : id;
+            var path = getPath(args.node, newText, isId, this.parent);
             this.expandNodeTarget = args.node.getAttribute('data-uid');
             this.parent.expandedId = this.expandNodeTarget;
             this.parent.itemData = this.getTreeData(getValue('id', args.nodeData));

package/src/file-manager/models/default-locale.js

@@ -47,6 +47,8 @@ export var defaultLocale = {
     'None': 'None',
     'View-LargeIcons': 'Large icons',
     'View-Details': 'Details',
+    'Upload-File': 'File',
+    'Upload-Folder': 'Folder',
     'Search': 'Search',
     'Button-Ok': 'OK',
     'Button-Cancel': 'Cancel',
@@ -95,6 +97,8 @@ export var defaultLocale = {
     'ApplyAll-Label': 'Do this for all current items',
     'KB': 'KB',
     'Access-Message': '{0} is not accessible. You need permission to perform the {1} action.',
+    'FolderUpload-Access-Message': '{0} is not accessible. you need permission to perform the {1} action.',
+    'FileUpload-Access-Message': '{0} is not accessible. you need permission to perform the {1} action.',
     'Network-Error': 'NetworkError: Failed to send on XMLHTTPRequest: Failed to load',
     'Server-Error': 'ServerError: Invalid response from'
 };