@syncfusion/ej2-filemanager 19.4.48 → 19.4.50-117124

package/src/file-manager/actions/virtualization.js

@@ -0,0 +1,179 @@
+import { EventHandler, isNullOrUndefined, detach, formatUnit, getValue, addClass, select, closest } from '@syncfusion/ej2-base';
+import { ListBase } from '@syncfusion/ej2-lists';
+import { createElement, selectAll, } from '@syncfusion/ej2-base';
+import * as CLS from '../base/classes';
+var Virtualization = /** @class */ (function () {
+    function Virtualization(instance) {
+        this.largeIconsViewItemsCount = 40;
+        this.filemanagerInstance = instance;
+        this.largeIconInstance = instance.largeiconsviewModule;
+    }
+    // Update the scroller height based on the items count.
+    Virtualization.prototype.setUlElementHeight = function () {
+        this.rowItemCount = this.ValidateItemCount(Object.keys(this.largeIconInstance.allItems).length);
+        this.lastRowCount = (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount ?
+            (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount : this.rowItemCount;
+        this.topElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.topElement, this.largeIconInstance.element.firstElementChild.firstChild);
+        this.bottomElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.bottomElement, null);
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'));
+        this.listItemHeight = this.largeIconInstance.itemList[0].getBoundingClientRect().height + marginValue;
+        this.totalHeight = (Object.keys(this.largeIconInstance.allItems).length / this.rowItemCount) * this.listItemHeight;
+        this.topElement.style.height = 0 + 'px';
+        this.bottomElement.style.height = this.totalHeight + 'px';
+        this.topElementHeight = 0;
+        this.bottomElementHeight = this.totalHeight;
+        this.listDiff = 0;
+        this.renderedCount = this.largeIconsViewItemsCount;
+    };
+    // Calculated the maximum number of items can be rendered in each row.
+    Virtualization.prototype.ValidateItemCount = function (dataSourceLength) {
+        var width = parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth));
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-right')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-left'));
+        var itemCount = Math.floor(width / (this.largeIconInstance.itemList[0].offsetWidth + marginValue));
+        if (itemCount > dataSourceLength) {
+            itemCount = dataSourceLength;
+        }
+        return itemCount;
+    };
+    // Bind the scroll event for large icons view ul element.
+    Virtualization.prototype.wireScrollEvent = function (destroy) {
+        if (!destroy) {
+            EventHandler.add(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll, this);
+        }
+        else {
+            EventHandler.remove(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll);
+        }
+    };
+    // Update the top and bottom element height and update the scroll position.
+    Virtualization.prototype.onVirtualUiScroll = function (e) {
+        var _a;
+        var startingHeight = 0;
+        this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
+        var scroll = this.getscrollerHeight(startingHeight);
+        this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        _a = scroll <= this.totalHeight ?
+            [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];
+        if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
+            this.topElement.style.height = this.topElementHeight + 'px';
+            this.bottomElement.style.height = this.bottomElementHeight + 'px';
+            // checked whether the scrolling is upward/downward
+            if (scroll > this.scrollPosition) {
+                var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                this.onNormalScroll(listDiff, true);
+            }
+            else {
+                var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
+                this.onNormalScroll(listDiff, false);
+            }
+        }
+        this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
+        this.scrollPosition = scroll;
+        this.largeIconInstance.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.largeIconInstance.element));
+        this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
+            this.largeIconsViewItemsCount, this.renderedCount);
+    };
+    // Calculated the scroller height.
+    Virtualization.prototype.getscrollerHeight = function (startingHeight) {
+        return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
+            (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
+    };
+    // Update the UI based on the scrolled position.
+    Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {
+        for (var i = 0; i < listDiff; i++) {
+            this.updateUI(isScrollingDown);
+        }
+        this.updateSelection();
+    };
+    // Updating the items in large icons view dynamically.
+    Virtualization.prototype.updateUI = function (isScrollingDown) {
+        var _this = this;
+        if (isScrollingDown) {
+            this.items = this.largeIconInstance.allItems.slice(this.renderedCount, this.renderedCount + this.rowItemCount);
+            if (this.items.length > 0) {
+                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
+                this.itemList.forEach(function (liEle) {
+                    _this.largeIconInstance.element.firstElementChild.insertBefore(liEle, _this.bottomElement);
+                });
+                this.renderedCount = (this.largeIconInstance.allItems.length >= this.renderedCount + this.rowItemCount) ?
+                    this.renderedCount + this.rowItemCount : this.renderedCount + this.lastRowCount;
+                for (var i_1 = 0; i_1 < this.rowItemCount; i_1++) {
+                    detach(this.topElement.nextElementSibling);
+                }
+            }
+        }
+        else {
+            var lastItemIndex = void 0;
+            var isAllRendered = void 0;
+            if (this.renderedCount == this.largeIconInstance.allItems.length) {
+                lastItemIndex = this.renderedCount - (this.largeIconsViewItemsCount - this.rowItemCount + this.lastRowCount);
+                this.renderedCount = ((this.renderedCount - this.lastRowCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.lastRowCount);
+                isAllRendered = true;
+            }
+            else {
+                lastItemIndex = this.renderedCount - this.largeIconsViewItemsCount;
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.rowItemCount);
+            }
+            var startItemIndex = (lastItemIndex - this.rowItemCount > 0) ? lastItemIndex - this.rowItemCount : 0;
+            this.items = this.largeIconInstance.allItems.slice(startItemIndex, lastItemIndex);
+            if (this.items.length > 0) {
+                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
+                for (var len = this.itemList.length; len > 0; len--) {
+                    this.largeIconInstance.element.firstElementChild.insertBefore(this.itemList[len - 1], this.topElement.nextElementSibling);
+                }
+                for (var i = 0; i < ((isAllRendered) ? this.lastRowCount : this.rowItemCount); i++) {
+                    detach(this.bottomElement.previousElementSibling);
+                }
+            }
+        }
+    };
+    // Update the selected item state.
+    Virtualization.prototype.updateSelection = function () {
+        for (var i = 0; i < this.filemanagerInstance.selectedItems.length; i++) {
+            for (var j = 0; j < this.items.length; j++) {
+                if (this.filemanagerInstance.selectedItems[i] == getValue('name', this.items[j])) {
+                    this.updateCheckState(this.itemList[j]);
+                }
+            }
+        }
+    };
+    // Update the check state for items.
+    Virtualization.prototype.updateCheckState = function (liItem) {
+        if (this.filemanagerInstance.allowMultiSelection) {
+            addClass([liItem], [CLS.ACTIVE]);
+            liItem.setAttribute('aria-selected', 'true');
+            var checkEle = select('.' + CLS.FRAME, liItem);
+            if (!checkEle.classList.contains(CLS.CHECK)) {
+                addClass([checkEle], CLS.CHECK);
+                closest(checkEle, '.' + CLS.CB_WRAP).setAttribute('aria-checked', 'true');
+            }
+        }
+    };
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    Virtualization.prototype.getModuleName = function () {
+        return 'virtualization';
+    };
+    Virtualization.prototype.destroy = function () {
+        if (this.filemanagerInstance.isDestroyed) {
+            return;
+        }
+        if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
+            this.wireScrollEvent(true);
+        }
+    };
+    return Virtualization;
+}());
+export { Virtualization };

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

@@ -149,6 +149,8 @@ export declare const SUBMENU_ICON: string;
 /** @hidden */
 export declare const GRID_VIEW: string;
 /** @hidden */
+export declare const GRID_CONTENT: string;
+/** @hidden */
 export declare const ICON_VIEW: string;
 /** @hidden */
 export declare const ICON_OPEN: string;

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

@@ -149,6 +149,8 @@ export var SUBMENU_ICON = 'e-caret';
 /** @hidden */
 export var GRID_VIEW = 'e-content';
 /** @hidden */
+export var GRID_CONTENT = 'e-gridcontent';
+/** @hidden */
 export var ICON_VIEW = 'e-list-parent';
 /** @hidden */
 export var ICON_OPEN = 'e-icons e-fe-open';

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
+import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings, VirtualizationSettings } from '../models/index';import { NavigationPaneSettingsModel, DetailsViewSettingsModel, VirtualizationSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -65,6 +65,19 @@ export interface FileManagerModel extends ComponentModel{
      */
     detailsViewSettings?: DetailsViewSettingsModel;
 
+    /**
+     * Gets or sets the virtualization settings of the File Manager to load a large set of files/folders.
+     * When `virtualizationSettings.enable` is true, the file and folders will be loaded based on the count specified in corresponding views.
+     * By default, 20 files/folders render in the details view and 40 files and folders render in the large icons view.
+     * The remaining files/folders will be rendered on vertical scroll within File Manager content.
+     * @default { 
+     * enable: false 
+     * detailsViewItemsCount: 20, 
+     * largeIconsViewItemsCount: 40 
+     * }
+     */
+    virtualizationSettings?: VirtualizationSettingsModel;
+
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
@@ -106,6 +119,7 @@ export interface FileManagerModel extends ComponentModel{
      *  maxWidth: '650px',
      *  minWidth: '240px',
      *  visible: true,
+     *  sortOrder: 'None'
      * }
      */
     navigationPaneSettings?: NavigationPaneSettingsModel;
@@ -182,6 +196,13 @@ export interface FileManagerModel extends ComponentModel{
      */
     sortOrder?: SortOrder;
 
+    /**
+     * Specifies the field name being used as the sorting criteria to sort the files of the file manager component.
+     *
+     * @default 'name'
+     */
+    sortBy?: string;
+
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *
@@ -201,7 +222,8 @@ export interface FileManagerModel extends ComponentModel{
      *  minFileSize: 0,
      *  maxFileSize: 30000000,
      *  allowedExtensions: '',
-     *  autoClose: false
+     *  autoClose: false,
+     *  directoryUpload: false
      * }
      */
     uploadSettings?: UploadSettingsModel;

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

@@ -20,6 +20,7 @@ import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';
 import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';
 import { BreadCrumbBar } from '../actions/breadcrumb-bar';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
+import { Virtualization } from '../actions/virtualization';
 /**
  * The FileManager component allows users to access and manage the file system through the web  browser. It can performs the
  * functionalities like add, rename, search, sort, upload and delete files or folders. And also it
@@ -45,6 +46,8 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     contextmenuModule: IContextMenu;
     /** @hidden */
     breadcrumbbarModule: BreadCrumbBar;
+    /** @hidden */
+    virtualizationModule: Virtualization;
     private keyboardModule;
     private keyConfigs;
     filterData: Object;
@@ -94,7 +97,6 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     isMobile: boolean;
     isBigger: boolean;
     isFile: boolean;
-    sortBy: string;
     actionRecords: Object[];
     activeRecords: Object[];
     isCut: boolean;
@@ -142,6 +144,9 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     destinationPath: string;
     uploadingCount: number;
     uploadedCount: number;
+    isMac: boolean;
+    oldView: string;
+    oldPath: string;
     /**
      * Specifies the AJAX settings of the file manager.
      *
@@ -195,6 +200,18 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * }
      */
     detailsViewSettings: DetailsViewSettingsModel;
+    /**
+     * Gets or sets the virtualization settings of the File Manager to load a large set of files/folders.
+     * When `virtualizationSettings.enable` is true, the file and folders will be loaded based on the count specified in corresponding views.
+     * By default, 20 files/folders render in the details view and 40 files and folders render in the large icons view.
+     * The remaining files/folders will be rendered on vertical scroll within File Manager content.
+     * @default {
+     * enable: false
+     * detailsViewItemsCount: 20,
+     * largeIconsViewItemsCount: 40
+     * }
+     */
+    private virtualizationSettings;
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
@@ -232,6 +249,7 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      *  maxWidth: '650px',
      *  minWidth: '240px',
      *  visible: true,
+     *  sortOrder: 'None'
      * }
      */
     navigationPaneSettings: NavigationPaneSettingsModel;
@@ -298,6 +316,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default 'Ascending'
      */
     sortOrder: SortOrder;
+    /**
+     * Specifies the field name being used as the sorting criteria to sort the files of the file manager component.
+     *
+     * @default 'name'
+     */
+    sortBy: string;
     /**
      * Specifies the group of items aligned horizontally in the toolbar.
      *
@@ -316,7 +340,8 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      *  minFileSize: 0,
      *  maxFileSize: 30000000,
      *  allowedExtensions: '',
-     *  autoClose: false
+     *  autoClose: false,
+     *  directoryUpload: false
      * }
      */
     uploadSettings: UploadSettingsModel;
@@ -525,6 +550,7 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     private onClose;
     private onUploading;
     private onRemoving;
+    private onCancel;
     private onClearing;
     private onSelected;
     private onFileUploadSuccess;

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

@@ -25,7 +25,7 @@ import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { createDialog, createExtDialog } from '../pop-up/dialog';
-import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';
+import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings, VirtualizationSettings } from '../models/index';
 import { SearchSettings } from '../models/index';
 import { LargeIconsView } from '../layout/large-icons-view';
 import { Uploader } from '@syncfusion/ej2-inputs';
@@ -69,7 +69,6 @@ var FileManager = /** @class */ (function (_super) {
         _this.uploadItem = [];
         _this.deleteRecords = [];
         _this.isFile = false;
-        _this.sortBy = 'name';
         _this.isCut = false;
         _this.isSearchCut = false;
         _this.isSearchDrag = false;
@@ -103,6 +102,8 @@ var FileManager = /** @class */ (function (_super) {
         _this.droppedObjects = [];
         _this.uploadingCount = 0;
         _this.uploadedCount = 0;
+        //Specifies whether the operating system is MAC or not 
+        _this.isMac = false;
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu);
         return _this;
     }
@@ -198,6 +199,12 @@ var FileManager = /** @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.virtualizationSettings.enable) {
+            modules.push({
+                member: 'virtualization',
+                args: [this]
+            });
+        }
         return modules;
     };
     /**
@@ -212,6 +219,7 @@ var FileManager = /** @class */ (function (_super) {
             this.allowMultiSelection ? this.selectedItems : this.selectedItems.slice(this.selectedItems.length - 1);
         this.setProperties({ selectedItems: slItems }, true);
         this.fileView = this.view;
+        this.isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
         this.setRtl(this.enableRtl);
         this.addEventListeners();
         read(this, (this.path !== this.originalPath) ? events.initialEnd : events.finalizeEnd, this.path);
@@ -409,6 +417,7 @@ var FileManager = /** @class */ (function (_super) {
             enableRtl: this.enableRtl,
             uploading: this.onUploading.bind(this),
             removing: this.onRemoving.bind(this),
+            canceling: this.onCancel.bind(this),
             clearing: this.onClearing.bind(this),
             selected: this.onSelected.bind(this),
             success: this.onUploadSuccess.bind(this),
@@ -417,6 +426,7 @@ var FileManager = /** @class */ (function (_super) {
             minFileSize: this.uploadSettings.minFileSize,
             maxFileSize: this.uploadSettings.maxFileSize,
             allowedExtensions: this.uploadSettings.allowedExtensions,
+            directoryUpload: this.uploadSettings.directoryUpload,
             fileListRendering: this.onFileListRender.bind(this)
         });
         this.uploadObj.appendTo('#' + this.element.id + CLS.UPLOAD_ID);
@@ -429,6 +439,7 @@ var FileManager = /** @class */ (function (_super) {
         this.uploadObj.minFileSize = this.uploadSettings.minFileSize;
         this.uploadObj.maxFileSize = this.uploadSettings.maxFileSize;
         this.uploadObj.allowedExtensions = this.uploadSettings.allowedExtensions;
+        this.uploadObj.directoryUpload = this.uploadSettings.directoryUpload;
         this.uploadObj.dataBind();
     };
     FileManager.prototype.onBeforeOpen = function (args) {
@@ -478,7 +489,7 @@ var FileManager = /** @class */ (function (_super) {
             }
         }
         var data = JSON.stringify(getValue(this.pathId[this.pathId.length - 1], this.feParent));
-        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }];
+        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }, { 'filename': args.fileData.name }];
         var uploadUrl = this.ajaxSettings.uploadUrl ? this.ajaxSettings.uploadUrl : this.ajaxSettings.url;
         // eslint-disable-next-line
         var ajaxSettings = {
@@ -516,6 +527,11 @@ var FileManager = /** @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
+    FileManager.prototype.onCancel = function (args) {
+        var data = JSON.stringify(getValue(this.pathId[this.pathId.length - 1], this.feParent));
+        args.customFormData = [{ 'path': this.path }, { 'action': 'remove' }, { 'data': data }];
+    };
+    /* istanbul ignore next */
     FileManager.prototype.onClearing = function () {
         if (this.isOpened) {
             this.uploadDialogObj.hide();
@@ -786,6 +802,13 @@ var FileManager = /** @class */ (function (_super) {
                     refresh(this);
                     this.notify(events.sortByChange, {});
                     break;
+                case 'sortBy':
+                    refresh(this);
+                    this.notify(events.sortByChange, {});
+                    if (this.view === 'Details') {
+                        this.notify(events.sortColumn, {});
+                    }
+                    break;
                 case 'popupTarget':
                     if (this.uploadDialogObj) {
                         this.uploadDialogObj.target = newProp.popupTarget;
@@ -1127,6 +1150,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Complex({}, DetailsViewSettings)
     ], FileManager.prototype, "detailsViewSettings", void 0);
+    __decorate([
+        Complex({}, VirtualizationSettings)
+    ], FileManager.prototype, "virtualizationSettings", void 0);
     __decorate([
         Property(true)
     ], FileManager.prototype, "enableHtmlSanitizer", void 0);
@@ -1169,6 +1195,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property('Ascending')
     ], FileManager.prototype, "sortOrder", void 0);
+    __decorate([
+        Property('name')
+    ], FileManager.prototype, "sortBy", void 0);
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);

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

@@ -11,7 +11,7 @@ import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';
 import { LargeIconsView } from '../layout';
 import { NavigationPaneSettingsModel } from '../models/navigation-pane-settings-model';
 import { Uploader } from '@syncfusion/ej2-inputs';
-import { BreadCrumbBar } from '../actions';
+import { BreadCrumbBar, Virtualization } from '../actions';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
 /**
  * Defines the view type of the FileManager.
@@ -511,6 +511,7 @@ export interface IFileManager extends Component<HTMLElement> {
     navigationpaneModule: ITreeView;
     largeiconsviewModule: LargeIconsView;
     breadcrumbbarModule: BreadCrumbBar;
+    virtualizationModule: Virtualization;
     toolbarSelection: boolean;
     duplicateItems: string[];
     duplicateRecords: Object[];
@@ -593,6 +594,9 @@ export interface IFileManager extends Component<HTMLElement> {
     destinationPath: string;
     enableHtmlSanitizer: boolean;
     refreshLayout(): void;
+    isMac: boolean;
+    oldView: string;
+    oldPath: string;
 }
 /** @hidden */
 export interface ITreeView extends Component<HTMLElement> {

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

@@ -315,6 +315,8 @@ function readSuccess(parent, result, event) {
             parent.notify(events.selectionChanged, {});
         }
         onFailure(parent, result, 'read');
+        parent.setProperties({ path: parent.oldPath }, true);
+        parent.pathNames.pop();
     }
     if (parent.isDragDrop && parent.isDropEnd) {
         if (parent.droppedObjects.length !== 0) {

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

@@ -268,7 +268,7 @@ export function searchWordHandler(parent, value, isLayoutChange) {
     else {
         if (!parent.isFiltered) {
             if (parent.isSortByClicked) {
-                parent.notify(events.layoutChange, { files: parent.largeiconsviewModule.items });
+                parent.notify(events.layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.allItems });
                 parent.isSortByClicked = false;
             }
             else {
@@ -289,6 +289,7 @@ export function searchWordHandler(parent, value, isLayoutChange) {
  * @private
  */
 export function updateLayout(parent, view) {
+    parent.oldView = parent.view;
     parent.setProperties({ view: view }, true);
     if (parent.breadcrumbbarModule.searchObj.element.value !== '' || parent.isFiltered) {
         parent.layoutSelectedItems = parent.selectedItems;
@@ -312,7 +313,7 @@ export function updateLayout(parent, view) {
 export function getTargetModule(parent, element) {
     var tartgetModule = '';
     if (element) {
-        if (closest(element, '.e-gridcontent')) {
+        if (closest(element, '.' + CLS.ROOT + '.' + CLS.CONTROL + ' .' + CLS.GRID_CONTENT)) {
             tartgetModule = 'detailsview';
         }
         else if (closest(element, '.' + CLS.LARGE_ICONS)) {
@@ -453,18 +454,19 @@ export function fileType(file) {
 // eslint-disable-next-line
 export function getImageUrl(parent, item) {
     var baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
+    var pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
     var imgUrl;
     var fileName = encodeURIComponent(getValue('name', item));
     var fPath = getValue('filterPath', item);
     if (parent.hasId) {
         var imgId = getValue('id', item);
-        imgUrl = baseUrl + '?path=' + parent.path + '&id=' + imgId;
+        imgUrl = baseUrl + pathUrl + parent.path + '&id=' + imgId;
     }
     else if (!isNOU(fPath)) {
-        imgUrl = baseUrl + '?path=' + fPath.replace(/\\/g, '/') + fileName;
+        imgUrl = baseUrl + pathUrl + encodeURIComponent(fPath.replace(/\\/g, '/')) + fileName;
     }
     else {
-        imgUrl = baseUrl + '?path=' + parent.path + fileName;
+        imgUrl = baseUrl + pathUrl + parent.path + fileName;
     }
     imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString();
     var eventArgs = {
@@ -801,6 +803,15 @@ export function pasteHandler(parent) {
                 parent.enablePaste = false;
                 parent.notify(events.hidePaste, {});
                 removeBlur(parent);
+                var result = {
+                    files: null,
+                    error: {
+                        code: '402',
+                        message: getLocaleText(parent, 'Same-Folder-Error'),
+                        fileExists: null
+                    }
+                };
+                createDialog(parent, 'Error', result);
             }
         }
     }
@@ -983,6 +994,11 @@ export function readDropPath(parent) {
     else {
         if (parent.navigationpaneModule) {
             var node = select('[data-uid="' + pathId + '"]', parent.navigationpaneModule.treeObj.element);
+            if (!node) {
+                var liElement = document.querySelector('[data-id = "' + getValue('id', parent.dropData) + '"]');
+                pathId = liElement.getAttribute("data-uid");
+                node = select('[data-uid="' + pathId + '"]', parent.navigationpaneModule.treeObj.element);
+            }
             updatePath(node, parent.dropData, parent);
         }
         read(parent, events.dropPath, parent.dropPath);

package/src/file-manager/layout/details-view.d.ts

@@ -115,6 +115,7 @@ export declare class DetailsView {
     private removeFocus;
     private getFocusedItemIndex;
     private keydownHandler;
+    actionDivert: boolean;
     private keyupHandler;
     gridSelectNodes(): Object[];
     private doDownload;
@@ -129,6 +130,7 @@ export declare class DetailsView {
     private InnerItems;
     private shiftSelectFocusItem;
     private addFocus;
+    private addHeaderFocus;
     private getFocusedItem;
     private isSelected;
     private shiftSelectedItem;