@syncfusion/ej2-filemanager 29.2.10 → 30.1.37

package/dist/ts/file-manager/pop-up/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * File Manager pop-up modules
+ */
+export * from './dialog';
+export * from './context-menu';

package/dist/ts/file-manager/pop-up/index.ts

@@ -0,0 +1,5 @@
+/**
+ * File Manager pop-up modules
+ */
+export * from './dialog';
+export * from './context-menu';

package/dist/ts/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * File Manager all modules
+ */
+export * from './file-manager/index';

package/dist/ts/index.ts

@@ -0,0 +1,4 @@
+/**
+ * File Manager all modules
+ */
+export * from './file-manager/index';

package/package.json

@@ -1,25 +1,56 @@
 {
-  "name": "@syncfusion/ej2-filemanager",
-  "version": "29.2.10",
-  "description": "Essential JS 2 FileManager Component",
-  "author": "Syncfusion Inc.",
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-filemanager.umd.min.js",
-  "module": "./index.js",
-  "es2015": "./dist/es6/ej2-filemanager.es5.js",
+  "_from": "@syncfusion/ej2-filemanager@*",
+  "_id": "@syncfusion/ej2-filemanager@18.29.0",
+  "_inBundle": false,
+  "_integrity": "sha512-m+dTRx6v4/UxMRkeGpTrb+MkOh3/4GRzAeQzb3lNgJBKYqUPT2rntcsowQu6G040eYFLdwcpubRZzRcb4NttDg==",
+  "_location": "/@syncfusion/ej2-filemanager",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "@syncfusion/ej2-filemanager@*",
+    "name": "@syncfusion/ej2-filemanager",
+    "escapedName": "@syncfusion%2fej2-filemanager",
+    "scope": "@syncfusion",
+    "rawSpec": "*",
+    "saveSpec": null,
+    "fetchSpec": "*"
+  },
+  "_requiredBy": [
+    "/",
+    "/@syncfusion/ej2-angular-filemanager",
+    "/@syncfusion/ej2-react-filemanager",
+    "/@syncfusion/ej2-richtexteditor",
+    "/@syncfusion/ej2-vue-filemanager"
+  ],
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.29.0.tgz",
+  "_shasum": "2d7974f000a566a7fa4ed02ab2a9083550b03515",
+  "_spec": "@syncfusion/ej2-filemanager@*",
+  "_where": "D:\\SF3992\\WFH\\Nexus\\ej2-nexus-branch-switching-dev\\release",
+  "author": {
+    "name": "Syncfusion Inc."
+  },
+  "bugs": {
+    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/issues"
+  },
+  "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.2.4",
-    "@syncfusion/ej2-buttons": "~29.2.5",
-    "@syncfusion/ej2-data": "~29.2.4",
-    "@syncfusion/ej2-grids": "~29.2.10",
-    "@syncfusion/ej2-inputs": "~29.2.5",
-    "@syncfusion/ej2-layouts": "~29.2.4",
-    "@syncfusion/ej2-lists": "~29.2.4",
-    "@syncfusion/ej2-navigations": "~29.2.8",
-    "@syncfusion/ej2-popups": "~29.2.8",
-    "@syncfusion/ej2-splitbuttons": "~29.2.4"
+    "@syncfusion/ej2-base": "~30.1.37",
+    "@syncfusion/ej2-buttons": "~30.1.37",
+    "@syncfusion/ej2-data": "~30.1.37",
+    "@syncfusion/ej2-grids": "~30.1.37",
+    "@syncfusion/ej2-inputs": "~30.1.37",
+    "@syncfusion/ej2-layouts": "~30.1.37",
+    "@syncfusion/ej2-lists": "~30.1.37",
+    "@syncfusion/ej2-navigations": "~30.1.37",
+    "@syncfusion/ej2-popups": "~30.1.37",
+    "@syncfusion/ej2-splitbuttons": "~30.1.37"
   },
+  "deprecated": false,
+  "description": "Essential JS 2 FileManager Component",
   "devDependencies": {},
+  "es2015": "./dist/es6/ej2-filemanager.es5.js",
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -34,11 +65,15 @@
     "file selector",
     "directory viewer"
   ],
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-filemanager.umd.min.js",
+  "module": "./index.js",
+  "name": "@syncfusion/ej2-filemanager",
   "repository": {
     "type": "git",
-    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls.git"
+    "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "sideEffects": false,
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
+  "version": "30.1.37",
+  "sideEffects": false
 }

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

@@ -328,6 +328,16 @@ export interface BeforeImageLoadEventArgs {
      * Specifies the URL along with custom attributes to be sent to server.
      */
     imageUrl?: string;
+    /**
+     * Returns the AJAX configuration details used when the `ajaxSettings` URL is specified.
+     */
+    ajaxSettings?: Object;
+    /**
+     * Specifies whether the image source should be represented as a URL or a Blob object.
+     * Set this property to <c>false</c> to render the image source as a Blob (e.g., via `URL.createObjectURL(file)`), which is useful in scenarios.
+     * where the File Manager must authenticate requests to access the images.
+     */
+    useImageAsUrl?: boolean;
 }
 /**
  * Interface for folder create event arguments.

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

@@ -1,4 +1,4 @@
-import { IFileManager } from '../base/interface';
+import { IFileManager, ReadArgs } from '../base/interface';
 /**
  * Function to read the content from given path in File Manager.
  *
@@ -103,3 +103,20 @@ export declare function Search(parent: IFileManager, event: string, path: string
  * @private
  */
 export declare function Download(parent: IFileManager, path: string, items: string[]): void;
+/**
+ * Function for trigger Fetch success in File Manager.
+ *
+ * @param {IFileManager} parent - specifies the parent element.
+ * @param {Object} ajaxSettings - specifies the ajax settings.
+ * @returns {void}
+ */
+export declare function triggerFetchSuccess(parent: IFileManager, ajaxSettings: Object): void;
+/**
+ * Function for trigger Fetch failure in File Manager.
+ *
+ * @param {IFileManager} parent - specifies the parent element.
+ * @param {Object} ajaxSettings - specifies the ajax settings.
+ * @param {ReadArgs} result - specifies the result.
+ * @returns {void}
+ */
+export declare function triggerFetchFailure(parent: IFileManager, ajaxSettings: Object, result: ReadArgs): void;

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

@@ -226,6 +226,11 @@ function createNewItem(data, target, itemName, isCopy) {
         size: isCopy ? data.size : 0,
         type: isCopy ? data.type : ''
     });
+    if (!isNOU(target.filterId)) {
+        Object.assign(newItem, {
+            filterId: target.filterId + target.id + '/'
+        });
+    }
     return newItem;
 }
 /**
@@ -467,6 +472,12 @@ function triggerMoveOrCopyOperation(parent, data, eventArgs) {
                         }
                         fileData.parentId = target_1.id;
                         fileData.filterPath = target_1.id === 0 ? '\\' : target_1.filterPath + target_1.name + '\\';
+                        if (!isNOU(target_1.filterId)) {
+                            fileData.filterId = target_1.filterId + target_1.id + '/';
+                        }
+                        if (!currItem.isFile) {
+                            updateMovedItemChildren(parent, fileData);
+                        }
                     }
                     else {
                         file_1.push(currItem.name);
@@ -786,6 +797,26 @@ function copyFolderItems(parent, data, target, itemName) {
         copyFolderItems(parent, copiedItems[i], newObject, null);
     }
 }
+/**
+ * Function to move operation.
+ *
+ * @param {IFileManager} parent - specifies the parent element.
+ * @param {Object} itemData - specifies the data.
+ * @returns {void}
+ * @private
+ */
+function updateMovedItemChildren(parent, itemData) {
+    var childItems = filterByParent(parent, itemData.id);
+    childItems.forEach(function (childItem) {
+        childItem.filterPath = itemData.filterPath + itemData.name + '\\';
+        if (!isNOU(itemData.filterId)) {
+            childItem.filterId = itemData.filterId + itemData.id + '/';
+        }
+        if (!childItem.isFile) {
+            updateMovedItemChildren(parent, childItem);
+        }
+    });
+}
 /**
  * Function for trigger Ajax failure in File Manager.
  *
@@ -1300,3 +1331,31 @@ function handleCatchError(parent, error, action) {
     };
     onFailure(parent, errorResult, action);
 }
+/**
+ * Function for trigger Fetch success in File Manager.
+ *
+ * @param {IFileManager} parent - specifies the parent element.
+ * @param {Object} ajaxSettings - specifies the ajax settings.
+ * @returns {void}
+ */
+export function triggerFetchSuccess(parent, ajaxSettings) {
+    parent.notify(events.afterRequest, { action: 'success' });
+    if (ajaxSettings && typeof getValue('onSuccess', ajaxSettings) === 'function') {
+        getValue('onSuccess', ajaxSettings)();
+    }
+}
+/**
+ * Function for trigger Fetch failure in File Manager.
+ *
+ * @param {IFileManager} parent - specifies the parent element.
+ * @param {Object} ajaxSettings - specifies the ajax settings.
+ * @param {ReadArgs} result - specifies the result.
+ * @returns {void}
+ */
+export function triggerFetchFailure(parent, ajaxSettings, result) {
+    parent.notify(events.afterRequest, { action: 'failure' });
+    createDialog(parent, 'Error', result);
+    if (typeof getValue('onFailure', ajaxSettings) === 'function') {
+        getValue('onFailure', ajaxSettings)();
+    }
+}

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

@@ -1,4 +1,4 @@
-import { IFileManager, ReadArgs, SearchArgs } from '../base/interface';
+import { IFileManager, ReadArgs, SearchArgs, BeforeImageLoadEventArgs } from '../base/interface';
 import { Draggable } from '@syncfusion/ej2-base';
 import { DragEventArgs } from '@syncfusion/ej2-base';
 import { MenuEventArgs } from '@syncfusion/ej2-navigations';
@@ -202,10 +202,10 @@ export declare function fileType(file: Object): string;
  *
  * @param {IFileManager} parent - specifies the parent element.
  * @param {Object} item - specifies the item.
- * @returns {string} - returns the image url.
+ * @returns {BeforeImageLoadEventArgs} - returns the eventargs.
  * @private
  */
-export declare function getImageUrl(parent: IFileManager, item: Object): string;
+export declare function getImageUrl(parent: IFileManager, item: Object): BeforeImageLoadEventArgs;
 /**
  * Gets the full path
  *

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

@@ -518,7 +518,7 @@ export function fileType(file) {
  *
  * @param {IFileManager} parent - specifies the parent element.
  * @param {Object} item - specifies the item.
- * @returns {string} - returns the image url.
+ * @returns {BeforeImageLoadEventArgs} - returns the eventargs.
  * @private
  */
 export function getImageUrl(parent, item) {
@@ -526,10 +526,11 @@ export function getImageUrl(parent, item) {
     if (isFileSystemData(parent)) {
         var eventArgs_1 = {
             fileDetails: [item],
-            imageUrl: imgUrl
+            imageUrl: imgUrl,
+            useImageAsUrl: true
         };
         parent.trigger('beforeImageLoad', eventArgs_1);
-        return eventArgs_1.imageUrl;
+        return eventArgs_1;
     }
     var baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
     var pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
@@ -546,12 +547,25 @@ export function getImageUrl(parent, item) {
         imgUrl = baseUrl + pathUrl + parent.path + fileName;
     }
     imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString();
+    var data = { 'action': 'getImage', 'path': parent.path + fileName, 'id': getValue('id', item) };
+    var ajaxSettings = {
+        url: baseUrl,
+        type: 'POST',
+        contentType: 'application/json',
+        responseType: 'blob',
+        data: JSON.stringify(data),
+        onSuccess: null,
+        onFailure: null,
+        beforeSend: null
+    };
     var eventArgs = {
         fileDetails: [item],
-        imageUrl: imgUrl
+        imageUrl: imgUrl,
+        useImageAsUrl: true,
+        ajaxSettings: ajaxSettings
     };
     parent.trigger('beforeImageLoad', eventArgs);
-    return eventArgs.imageUrl;
+    return eventArgs;
 }
 /* istanbul ignore next */
 /**
@@ -673,7 +687,7 @@ export function createEmptyElement(parent, element, args) {
         }
         else {
             element.querySelector('.' + CLS.EMPTY_CONTENT).innerHTML = getLocaleText(parent, 'Folder-Empty');
-            element.querySelector('.' + CLS.EMPTY_INNER_CONTENT).innerHTML = getLocaleText(parent, 'File-Upload');
+            element.querySelector('.' + CLS.EMPTY_INNER_CONTENT).innerHTML = parent.uploadObj.dropArea == null ? getLocaleText(parent, '') : getLocaleText(parent, 'File-Upload');
         }
     }
     var eDiv = select('.' + CLS.EMPTY, element);

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

@@ -435,7 +435,8 @@ var DetailsView = /** @class */ (function () {
         if (this.parent.layoutSelectedItems.length) {
             this.selectRecords(this.parent.layoutSelectedItems);
         }
-        if (this.parent.renamedItem) {
+        if (this.parent.renamedItem && this.parent.selectedItems.length === 0) {
+            this.gridObj.clearSelection();
             this.addSelection(this.parent.renamedItem);
             this.parent.renamedItem = null;
         }
@@ -685,8 +686,8 @@ var DetailsView = /** @class */ (function () {
                 if (getValue('isFile', data)) {
                     var icon = fileType(data);
                     if (icon === CLS.ICON_IMAGE) {
-                        var imgUrl = getImageUrl(_this.parent, data);
-                        createImageDialog(_this.parent, name_2, imgUrl);
+                        var imageData = getImageUrl(_this.parent, data);
+                        createImageDialog(_this.parent, name_2, imageData);
                     }
                 }
                 else {

package/src/file-manager/layout/large-icons-view.d.ts

@@ -29,6 +29,8 @@ export declare class LargeIconsView {
     private isPasteOperation;
     private dragObj;
     private isInteracted;
+    private imageEventArgsMap;
+    private imageUrlCache;
     /**
      * Constructor for the LargeIcons module.
      *
@@ -37,6 +39,7 @@ export declare class LargeIconsView {
      */
     constructor(parent?: IFileManager);
     private render;
+    private loadImages;
     private comparer;
     private preventImgDrag;
     private createDragObj;

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

@@ -1,5 +1,5 @@
 import { ListBase } from '@syncfusion/ej2-lists';
-import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, Draggable } from '@syncfusion/ej2-base';
+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';
 import { getValue, setValue, remove } from '@syncfusion/ej2-base';
 import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
@@ -7,12 +7,12 @@ import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
 import * as CLS from '../base/classes';
 import { createCheckBox } from '@syncfusion/ej2-buttons';
-import { read, GetDetails, Delete } from '../common/operations';
+import { read, GetDetails, Delete, triggerFetchFailure, triggerFetchSuccess } from '../common/operations';
 import { doRename, getAccessClass, getPathObject, getFullPath, getDirectoryPath, rename, doDownload, getItemName } from '../common/index';
 import { removeBlur, cutFiles, copyFiles, addBlur, openSearchFolder, removeActive, pasteHandler } from '../common/index';
 import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getModule } from '../common/index';
 import { updateRenamingData, doDeleteFiles, doDownloadFiles } from '../common/index';
-import { openAction, fileType, refresh, getImageUrl, getSortedData, createDeniedDialog, updateLayout } from '../common/utility';
+import { openAction, fileType, refresh, getImageUrl, getSortedData, createDeniedDialog, updateLayout, getLocaleText } from '../common/utility';
 import { createEmptyElement, hasReadAccess, hasEditAccess } from '../common/utility';
 import { createDialog, createImageDialog } from '../pop-up/dialog';
 /**
@@ -34,6 +34,8 @@ var LargeIconsView = /** @class */ (function () {
         this.isSelectAllCalled = false;
         this.isPasteOperation = false;
         this.isInteracted = true;
+        this.imageEventArgsMap = new Map();
+        this.imageUrlCache = new Map();
         this.parent = parent;
         this.element = select('#' + this.parent.element.id + CLS.LARGEICON_ID, this.parent.element);
         addClass([this.element], CLS.LARGE_ICONS);
@@ -105,7 +107,7 @@ var LargeIconsView = /** @class */ (function () {
                     groupItemRole: 'group', wrapperRole: ''
                 },
                 showIcon: true,
-                fields: { text: 'name', iconCss: '_fm_icon', imageUrl: '_fm_imageUrl', htmlAttributes: '_fm_htmlAttr' },
+                fields: { text: 'name', iconCss: '_fm_icon', imageUrl: '_fm_imageUrl', imageAttributes: '_fm_imageAttr', htmlAttributes: '_fm_htmlAttr' },
                 sortOrder: this.parent.sortOrder,
                 itemCreated: this.onItemCreated.bind(this),
                 enableHtmlSanitizer: this.parent.enableHtmlSanitizer
@@ -125,6 +127,9 @@ var LargeIconsView = /** @class */ (function () {
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
             this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
             this.element.appendChild(this.listElements);
+            if (this.imageEventArgsMap.size > 0) {
+                this.loadImages();
+            }
             this.listElements.setAttribute('aria-label', 'listbox');
             this.preventImgDrag();
             this.createDragObj();
@@ -172,6 +177,51 @@ var LargeIconsView = /** @class */ (function () {
             }
         }
     };
+    LargeIconsView.prototype.loadImages = function () {
+        var _this = this;
+        var imageEle = this.parent.element.querySelectorAll('.e-list-img');
+        imageEle.forEach(function (imgElement) {
+            var imageKey = imgElement.getAttribute('data-image-key');
+            if (!imageKey) {
+                return;
+            }
+            if (_this.imageUrlCache.has(imageKey)) {
+                imgElement.setAttribute('src', _this.imageUrlCache.get(imageKey));
+                imgElement.classList.remove('image-blur');
+                return;
+            }
+            var imageDetails = _this.imageEventArgsMap.get(imageKey);
+            if (!imageDetails) {
+                return;
+            }
+            var fetch = new Fetch({
+                url: getValue('url', imageDetails.ajaxSettings),
+                type: getValue('type', imageDetails.ajaxSettings),
+                contentType: getValue('contentType', imageDetails.ajaxSettings),
+                responseType: getValue('responseType', imageDetails.ajaxSettings),
+                beforeSend: getValue('beforeSend', imageDetails.ajaxSettings),
+                onSuccess: function (blob) {
+                    var blobUrl = URL.createObjectURL(blob);
+                    _this.imageUrlCache.set(imageKey, blobUrl);
+                    imgElement.setAttribute('src', blobUrl);
+                    imgElement.classList.remove('image-blur');
+                    triggerFetchSuccess(_this.parent, imageDetails.ajaxSettings);
+                },
+                onFailure: function (response) {
+                    var result = {
+                        files: null,
+                        error: {
+                            code: response.status ? response.status.toString() : '404',
+                            message: getLocaleText(_this.parent, 'Network-Error') + ' ' + getValue('url', imageDetails.ajaxSettings),
+                            fileExists: null
+                        }
+                    };
+                    triggerFetchFailure(_this.parent, imageDetails.ajaxSettings, result);
+                }
+            });
+            fetch.send(getValue('data', imageDetails.ajaxSettings));
+        });
+    };
     LargeIconsView.prototype.comparer = function (x, y) {
         if (this.parent.sortOrder === 'Descending') {
             var z = x;
@@ -346,9 +396,17 @@ var LargeIconsView = /** @class */ (function () {
                 className += ' ' + getAccessClass(items[i]);
             }
             if (icon === CLS.ICON_IMAGE && this.parent.showThumbnail && hasReadAccess(items[i])) {
-                var imgUrl = getImageUrl(this.parent, items[i]);
-                setValue('_fm_imageUrl', imgUrl, items[i]);
-                setValue('_fm_imageAttr', { alt: name_1 }, items[i]);
+                var imageData = getImageUrl(this.parent, items[i]);
+                if (imageData.useImageAsUrl) {
+                    setValue('_fm_imageUrl', imageData.imageUrl, items[i]);
+                    setValue('_fm_imageAttr', { alt: name_1 }, items[i]);
+                }
+                else {
+                    var uniqueKey = "img_" + name_1 + "_" + i;
+                    this.imageEventArgsMap.set(uniqueKey, imageData);
+                    setValue('_fm_imageUrl', '', items[i]);
+                    setValue('_fm_imageAttr', { alt: name_1, class: 'e-list-img image-blur', 'data-image-key': uniqueKey }, items[i]);
+                }
             }
             else {
                 setValue('_fm_icon', icon, items[i]);
@@ -894,8 +952,8 @@ var LargeIconsView = /** @class */ (function () {
                     else {
                         var icon = fileType(details_1);
                         if (icon === CLS.ICON_IMAGE) {
-                            var imgUrl = getImageUrl(_this.parent, details_1);
-                            createImageDialog(_this.parent, text, imgUrl);
+                            var imageData = getImageUrl(_this.parent, details_1);
+                            createImageDialog(_this.parent, text, imageData);
                         }
                     }
                 }

package/src/file-manager/pop-up/dialog.d.ts

@@ -1,4 +1,4 @@
-import { IFileManager, ReadArgs, FileDetails } from '../base/interface';
+import { IFileManager, ReadArgs, FileDetails, BeforeImageLoadEventArgs } from '../base/interface';
 import { SelectedEventArgs } from '@syncfusion/ej2-inputs';
 /**
  *
@@ -24,8 +24,8 @@ export declare function createExtDialog(parent: IFileManager, text: string, repl
  *
  * @param {IFileManager} parent - specifies the parent element.
  * @param {string} header - specifies the header element.
- * @param {string} imageUrl - specifies the image URL.
+ * @param {BeforeImageLoadEventArgs} imageData - specifies the image eventargs.
  * @returns {void}
  * @private
  */
-export declare function createImageDialog(parent: IFileManager, header: string, imageUrl: string): void;
+export declare function createImageDialog(parent: IFileManager, header: string, imageData: BeforeImageLoadEventArgs): void;

package/src/file-manager/pop-up/dialog.js

@@ -1,10 +1,10 @@
 import { Dialog } from '@syncfusion/ej2-popups';
-import { select, isNullOrUndefined as isNOU, createElement, Internationalization } from '@syncfusion/ej2-base';
+import { select, isNullOrUndefined as isNOU, createElement, Internationalization, Fetch } from '@syncfusion/ej2-base';
 import { getValue, remove, selectAll } from '@syncfusion/ej2-base';
 import { createFolder } from '../common/operations';
 import * as CLS from '../base/classes';
 import * as events from '../base/constant';
-import { paste, rename } from '../common/operations';
+import { paste, rename, triggerFetchFailure, triggerFetchSuccess } from '../common/operations';
 import { getLocaleText, getDuplicateData, objectToString, getCssClass, getTargetPath } from '../common/utility';
 import { Input } from '@syncfusion/ej2-inputs';
 import { CheckBox } from '@syncfusion/ej2-buttons';
@@ -917,14 +917,42 @@ function getKeyCode(e) {
  *
  * @param {IFileManager} parent - specifies the parent element.
  * @param {string} header - specifies the header element.
- * @param {string} imageUrl - specifies the image URL.
+ * @param {BeforeImageLoadEventArgs} imageData - specifies the image eventargs.
  * @returns {void}
  * @private
  */
-export function createImageDialog(parent, header, imageUrl) {
+export function createImageDialog(parent, header, imageData) {
     var content = createElement('div', { className: 'e-image-wrap' });
-    var image = createElement('img', { className: 'e-image', attrs: { src: imageUrl, alt: header } });
-    content.appendChild(image);
+    if (imageData.useImageAsUrl) {
+        var image = createElement('img', { className: 'e-image', attrs: { src: imageData.imageUrl, alt: header } });
+        content.appendChild(image);
+    }
+    else {
+        var fetch_1 = new Fetch({
+            url: getValue('url', imageData.ajaxSettings),
+            type: getValue('type', imageData.ajaxSettings),
+            contentType: getValue('contentType', imageData.ajaxSettings),
+            responseType: getValue('responseType', imageData.ajaxSettings),
+            beforeSend: getValue('beforeSend', imageData.ajaxSettings),
+            onSuccess: function (e) {
+                var blobUrl = URL.createObjectURL(e);
+                var image = createElement('img', { className: 'e-image', attrs: { src: blobUrl, alt: header } });
+                content.appendChild(image);
+                triggerFetchSuccess(parent, imageData.ajaxSettings);
+            },
+            onFailure: function (e) {
+                var result = {
+                    error: {
+                        code: e.status.toString(),
+                        message: getLocaleText(parent, 'Network-Error') + ' ' + getValue('url', imageData.ajaxSettings)
+                    }
+                };
+                triggerFetchFailure(parent, imageData.ajaxSettings, result);
+            }
+        });
+        var data = getValue('data', imageData.ajaxSettings);
+        fetch_1.send(data);
+    }
     if (isNOU(parent.viewerObj)) {
         parent.viewerObj = new Dialog({
             header: header,

package/styles/bds-lite.css

@@ -582,7 +582,6 @@ ejs-filemanager {
   margin: 5px;
   margin-right: 4px;
   padding: 3px;
-  padding: 5px;
   position: absolute;
   z-index: 1;
 }
@@ -841,6 +840,10 @@ ejs-filemanager {
   position: relative;
   vertical-align: bottom;
 }
+.e-filemanager .e-large-icons .image-blur {
+  -webkit-filter: blur(8px);
+          filter: blur(8px);
+}
 .e-filemanager .e-large-icons .e-list-text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1126,6 +1129,53 @@ ejs-filemanager {
   width: 100%;
 }
 
+.e-filemanager-dialog {
+  z-index: 1005;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+}
+
+.e-image-wrap-style {
+  height: 100%;
+}
+
+.e-fe-popup.e-dialog td.e-permission-content {
+  white-space: unset;
+}
+
+.e-large-icon-visible {
+  visibility: visible;
+}
+
+.e-large-icon-hidden {
+  visibility: hidden;
+}
+
+.e-fm-view-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100%;
+}
+
+.e-filemanager .e-empty-state-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+}
+
+.e-filemanager .e-empty.e-view-container {
+  margin: auto;
+}
+
 .e-filemanager {
   background: transparent;
   border-color: var(--color-sf-border-secondary);