@syncfusion/ej2-filemanager 29.2.10 → 30.1.37

package/dist/es6/ej2-filemanager.es2015.js

@@ -1198,7 +1198,7 @@ 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
  */
 function getImageUrl(parent, item) {
@@ -1206,10 +1206,11 @@ function getImageUrl(parent, item) {
     if (isFileSystemData(parent)) {
         const eventArgs = {
             fileDetails: [item],
-            imageUrl: imgUrl
+            imageUrl: imgUrl,
+            useImageAsUrl: true
         };
         parent.trigger('beforeImageLoad', eventArgs);
-        return eventArgs.imageUrl;
+        return eventArgs;
     }
     const baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
     const pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
@@ -1226,12 +1227,25 @@ function getImageUrl(parent, item) {
         imgUrl = baseUrl + pathUrl + parent.path + fileName;
     }
     imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString();
+    const data = { 'action': 'getImage', 'path': parent.path + fileName, 'id': getValue('id', item) };
+    const ajaxSettings = {
+        url: baseUrl,
+        type: 'POST',
+        contentType: 'application/json',
+        responseType: 'blob',
+        data: JSON.stringify(data),
+        onSuccess: null,
+        onFailure: null,
+        beforeSend: null
+    };
     const eventArgs = {
         fileDetails: [item],
-        imageUrl: imgUrl
+        imageUrl: imgUrl,
+        useImageAsUrl: true,
+        ajaxSettings: ajaxSettings
     };
     parent.trigger('beforeImageLoad', eventArgs);
-    return eventArgs.imageUrl;
+    return eventArgs;
 }
 /* istanbul ignore next */
 /**
@@ -1353,7 +1367,7 @@ function createEmptyElement(parent, element, args) {
         }
         else {
             element.querySelector('.' + EMPTY_CONTENT).innerHTML = getLocaleText(parent, 'Folder-Empty');
-            element.querySelector('.' + EMPTY_INNER_CONTENT).innerHTML = getLocaleText(parent, 'File-Upload');
+            element.querySelector('.' + EMPTY_INNER_CONTENT).innerHTML = parent.uploadObj.dropArea == null ? getLocaleText(parent, '') : getLocaleText(parent, 'File-Upload');
         }
     }
     const eDiv = select('.' + EMPTY, element);
@@ -2601,6 +2615,11 @@ function createNewItem(data, target, itemName, isCopy) {
         size: isCopy ? data.size : 0,
         type: isCopy ? data.type : ''
     });
+    if (!isNullOrUndefined(target.filterId)) {
+        Object.assign(newItem, {
+            filterId: target.filterId + target.id + '/'
+        });
+    }
     return newItem;
 }
 /**
@@ -2842,6 +2861,12 @@ function triggerMoveOrCopyOperation(parent, data, eventArgs) {
                         }
                         fileData.parentId = target.id;
                         fileData.filterPath = target.id === 0 ? '\\' : target.filterPath + target.name + '\\';
+                        if (!isNullOrUndefined(target.filterId)) {
+                            fileData.filterId = target.filterId + target.id + '/';
+                        }
+                        if (!currItem.isFile) {
+                            updateMovedItemChildren(parent, fileData);
+                        }
                     }
                     else {
                         file.push(currItem.name);
@@ -3161,6 +3186,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) {
+    const childItems = filterByParent(parent, itemData.id);
+    childItems.forEach((childItem) => {
+        childItem.filterPath = itemData.filterPath + itemData.name + '\\';
+        if (!isNullOrUndefined(itemData.filterId)) {
+            childItem.filterId = itemData.filterId + itemData.id + '/';
+        }
+        if (!childItem.isFile) {
+            updateMovedItemChildren(parent, childItem);
+        }
+    });
+}
 /**
  * Function for trigger Ajax failure in File Manager.
  *
@@ -3675,6 +3720,34 @@ 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}
+ */
+function triggerFetchSuccess(parent, ajaxSettings) {
+    parent.notify(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}
+ */
+function triggerFetchFailure(parent, ajaxSettings, result) {
+    parent.notify(afterRequest, { action: 'failure' });
+    createDialog(parent, 'Error', result);
+    if (typeof getValue('onFailure', ajaxSettings) === 'function') {
+        getValue('onFailure', ajaxSettings)();
+    }
+}
 
 /**
  *
@@ -4582,14 +4655,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
  */
-function createImageDialog(parent, header, imageUrl) {
+function createImageDialog(parent, header, imageData) {
     const content = createElement('div', { className: 'e-image-wrap' });
-    const image = createElement('img', { className: 'e-image', attrs: { src: imageUrl, alt: header } });
-    content.appendChild(image);
+    if (imageData.useImageAsUrl) {
+        const image = createElement('img', { className: 'e-image', attrs: { src: imageData.imageUrl, alt: header } });
+        content.appendChild(image);
+    }
+    else {
+        const fetch = 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: (e) => {
+                const blobUrl = URL.createObjectURL(e);
+                const image = createElement('img', { className: 'e-image', attrs: { src: blobUrl, alt: header } });
+                content.appendChild(image);
+                triggerFetchSuccess(parent, imageData.ajaxSettings);
+            },
+            onFailure: (e) => {
+                const result = {
+                    error: {
+                        code: e.status.toString(),
+                        message: getLocaleText(parent, 'Network-Error') + ' ' + getValue('url', imageData.ajaxSettings)
+                    }
+                };
+                triggerFetchFailure(parent, imageData.ajaxSettings, result);
+            }
+        });
+        const data = getValue('data', imageData.ajaxSettings);
+        fetch.send(data);
+    }
     if (isNullOrUndefined(parent.viewerObj)) {
         parent.viewerObj = new Dialog({
             header: header,
@@ -4682,6 +4783,8 @@ class LargeIconsView {
         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 + LARGEICON_ID, this.parent.element);
         addClass([this.element], LARGE_ICONS);
@@ -4753,7 +4856,7 @@ class LargeIconsView {
                     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
@@ -4773,6 +4876,9 @@ class LargeIconsView {
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
             this.itemList = Array.prototype.slice.call(selectAll('.' + 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();
@@ -4820,6 +4926,50 @@ class LargeIconsView {
             }
         }
     }
+    loadImages() {
+        const imageEle = this.parent.element.querySelectorAll('.e-list-img');
+        imageEle.forEach((imgElement) => {
+            const 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;
+            }
+            const imageDetails = this.imageEventArgsMap.get(imageKey);
+            if (!imageDetails) {
+                return;
+            }
+            const 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: (blob) => {
+                    const blobUrl = URL.createObjectURL(blob);
+                    this.imageUrlCache.set(imageKey, blobUrl);
+                    imgElement.setAttribute('src', blobUrl);
+                    imgElement.classList.remove('image-blur');
+                    triggerFetchSuccess(this.parent, imageDetails.ajaxSettings);
+                },
+                onFailure: (response) => {
+                    const 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));
+        });
+    }
     comparer(x, y) {
         if (this.parent.sortOrder === 'Descending') {
             const z = x;
@@ -4993,9 +5143,17 @@ class LargeIconsView {
                 className += ' ' + getAccessClass(items[i]);
             }
             if (icon === ICON_IMAGE && this.parent.showThumbnail && hasReadAccess(items[i])) {
-                const imgUrl = getImageUrl(this.parent, items[i]);
-                setValue('_fm_imageUrl', imgUrl, items[i]);
-                setValue('_fm_imageAttr', { alt: name }, items[i]);
+                const imageData = getImageUrl(this.parent, items[i]);
+                if (imageData.useImageAsUrl) {
+                    setValue('_fm_imageUrl', imageData.imageUrl, items[i]);
+                    setValue('_fm_imageAttr', { alt: name }, items[i]);
+                }
+                else {
+                    const uniqueKey = `img_${name}_${i}`;
+                    this.imageEventArgsMap.set(uniqueKey, imageData);
+                    setValue('_fm_imageUrl', '', items[i]);
+                    setValue('_fm_imageAttr', { alt: name, class: 'e-list-img image-blur', 'data-image-key': uniqueKey }, items[i]);
+                }
             }
             else {
                 setValue('_fm_icon', icon, items[i]);
@@ -5538,8 +5696,8 @@ class LargeIconsView {
                     else {
                         const icon = fileType(details);
                         if (icon === ICON_IMAGE) {
-                            const imgUrl = getImageUrl(this.parent, details);
-                            createImageDialog(this.parent, text, imgUrl);
+                            const imageData = getImageUrl(this.parent, details);
+                            createImageDialog(this.parent, text, imageData);
                         }
                     }
                 }
@@ -11096,7 +11254,8 @@ class DetailsView {
         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;
         }
@@ -11344,8 +11503,8 @@ class DetailsView {
                 if (getValue('isFile', data)) {
                     const icon = fileType(data);
                     if (icon === ICON_IMAGE) {
-                        const imgUrl = getImageUrl(this.parent, data);
-                        createImageDialog(this.parent, name, imgUrl);
+                        const imageData = getImageUrl(this.parent, data);
+                        createImageDialog(this.parent, name, imageData);
                     }
                 }
                 else {
@@ -12637,5 +12796,5 @@ class DetailsView {
     }
 }
 
-export { ACTIVE, ALT_DIALOG_ID, AjaxSettings, BLUR, BREADCRUMBBAR_ID, BREADCRUMBS, BreadCrumbBar, CB_WRAP, CHECK, CHECK_SELECT, CLONE, COLLAPSED, CONTENT_ID, CONTEXT_MENU_ID, CONTROL, Column, ContextMenu, ContextMenuSettings, DETAILS_LABEL, DIALOG_ID, DISPLAY_NONE, DROP_FILE, DROP_FOLDER, Delete, DetailsView, DetailsViewSettings, Download, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, ERROR_CONTENT, EXTN_DIALOG_ID, FILTER, FOCUS, FOCUSED, FOLDER, FRAME, FULLROW, FileManager, GRID_CONTENT, GRID_HEADER, GRID_ID, GRID_VIEW, GetDetails, HEADER_CHECK, HOVER, ICONS, ICON_BREADCRUMB, ICON_CLEAR, ICON_COLLAPSIBLE, ICON_COPY, ICON_CUT, ICON_DELETE, ICON_DETAILS, ICON_DOWNLOAD, ICON_DROP_IN, ICON_DROP_OUT, ICON_GRID, ICON_IMAGE, ICON_LARGE, ICON_MUSIC, ICON_NEWFOLDER, ICON_NO_DROP, ICON_OPEN, ICON_OPTIONS, ICON_PASTE, ICON_REFRESH, ICON_RENAME, ICON_SELECTALL, ICON_SHORTBY, ICON_UPLOAD, ICON_VIDEO, ICON_VIEW, IMG_DIALOG_ID, LARGEICON_ID, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON, LARGE_ICONS, LARGE_ICON_FOLDER, LAYOUT, LAYOUT_CONTENT, LAYOUT_ID, LIST_ITEM, LIST_PARENT, LIST_TEXT, LargeIconsView, MENU_ICON, MENU_ITEM, MOBILE, MOB_POPUP, MULTI_SELECT, NAVIGATION, NAVIGATION_ID, NavigationPane, NavigationPaneSettings, OVERLAY, RETRY_DIALOG_ID, RETRY_ID, ROOT, ROOT_POPUP, ROW, ROWCELL, RTL, SEARCH_ID, SELECTED_ITEMS, SORTBY_ID, SPLITTER_ID, SPLIT_BAR, STATUS, SUBMENU_ICON, Search, SearchSettings, TB_ITEM, TB_OPTION_DOT, TB_OPTION_TICK, TEMPLATE_CELL, TEXT_CONTENT, TOOLBAR_ID, TREE_ID, TREE_VIEW, Toolbar, ToolbarItem, ToolbarSettings, UPLOAD_DIALOG_ID, UPLOAD_ID, UploadSettings, VALUE, VIEW_ID, Virtualization, actionFailure, activeElement, addBlur, afterRequest, beforeDelete, beforeDownload, beforeRequest, clearAllInit, clearPathInit, closePopup, columnArray, copyFiles, createDeniedDialog, createDialog, createEmptyElement, createEnd, createExtDialog, createFolder, createImageDialog, createNewFolder, createVirtualDragElement, cutCopyInit, cutEnd, cutFiles, defaultToolbarItems, deleteEnd, deleteInit, destroy, detailsInit, doDeleteFiles, doDownload, doDownloadFiles, doPasteUpdate, doRename, download, downloadInit, dragCancel, dragEnd, dragHelper, dragStartHandler, dragStopHandler, dragging, draggingHandler, dropHandler, dropInit, dropPath, fileItems, fileType, filter, filterEnd, finalizeEnd, folderItems, generatePath, getAccessClass, getAccessDetails, getAllChildItems, getCssClass, getDirectories, getDirectoryPath, getDuplicateData, getFullPath, getImageUrl, getItemName, getLocaleText, getModule, getName, getObject, getParentPath, getParents, getPath, getPathId, getPathNames, getPathObject, getSortField, getSortedData, getTargetModule, getTargetPath, hasContentAccess, hasDownloadAccess, hasEditAccess, hasReadAccess, hasUploadAccess, hideLayout, hidePaste, initialEnd, isFile, isFileSystemData, layoutChange, layoutItems, layoutRefresh, menuItemData, methodCall, modelChanged, nodeExpand, objectToString, openAction, openEnd, openInit, openSearchFolder, paste, pasteEnd, pasteHandler, pasteInit, pathChanged, pathColumn, pathDrag, permissionCopy, permissionDownload, permissionEdit, permissionEditContents, permissionRead, permissionUpload, read, readDropPath, refresh, refreshEnd, removeActive, removeBlur, removeDropTarget, removeItemClass, rename, renameEnd, renameEndParent, renameInit, resizeEnd, scrollHandler, search, searchTextChange, searchWordHandler, selectAllInit, selectedData, selectionChanged, setDateObject, setNextPath, setNodeId, showPaste, skipUpload, sortByChange, sortColumn, sortComparer, sortbyClickHandler, splitterResize, treeSelect, updateLayout, updatePath, updateRenamingData, updateSelectionData, updateTreeSelection, upload, uploadItem, validateSubFolder };
+export { ACTIVE, ALT_DIALOG_ID, AjaxSettings, BLUR, BREADCRUMBBAR_ID, BREADCRUMBS, BreadCrumbBar, CB_WRAP, CHECK, CHECK_SELECT, CLONE, COLLAPSED, CONTENT_ID, CONTEXT_MENU_ID, CONTROL, Column, ContextMenu, ContextMenuSettings, DETAILS_LABEL, DIALOG_ID, DISPLAY_NONE, DROP_FILE, DROP_FOLDER, Delete, DetailsView, DetailsViewSettings, Download, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, ERROR_CONTENT, EXTN_DIALOG_ID, FILTER, FOCUS, FOCUSED, FOLDER, FRAME, FULLROW, FileManager, GRID_CONTENT, GRID_HEADER, GRID_ID, GRID_VIEW, GetDetails, HEADER_CHECK, HOVER, ICONS, ICON_BREADCRUMB, ICON_CLEAR, ICON_COLLAPSIBLE, ICON_COPY, ICON_CUT, ICON_DELETE, ICON_DETAILS, ICON_DOWNLOAD, ICON_DROP_IN, ICON_DROP_OUT, ICON_GRID, ICON_IMAGE, ICON_LARGE, ICON_MUSIC, ICON_NEWFOLDER, ICON_NO_DROP, ICON_OPEN, ICON_OPTIONS, ICON_PASTE, ICON_REFRESH, ICON_RENAME, ICON_SELECTALL, ICON_SHORTBY, ICON_UPLOAD, ICON_VIDEO, ICON_VIEW, IMG_DIALOG_ID, LARGEICON_ID, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON, LARGE_ICONS, LARGE_ICON_FOLDER, LAYOUT, LAYOUT_CONTENT, LAYOUT_ID, LIST_ITEM, LIST_PARENT, LIST_TEXT, LargeIconsView, MENU_ICON, MENU_ITEM, MOBILE, MOB_POPUP, MULTI_SELECT, NAVIGATION, NAVIGATION_ID, NavigationPane, NavigationPaneSettings, OVERLAY, RETRY_DIALOG_ID, RETRY_ID, ROOT, ROOT_POPUP, ROW, ROWCELL, RTL, SEARCH_ID, SELECTED_ITEMS, SORTBY_ID, SPLITTER_ID, SPLIT_BAR, STATUS, SUBMENU_ICON, Search, SearchSettings, TB_ITEM, TB_OPTION_DOT, TB_OPTION_TICK, TEMPLATE_CELL, TEXT_CONTENT, TOOLBAR_ID, TREE_ID, TREE_VIEW, Toolbar, ToolbarItem, ToolbarSettings, UPLOAD_DIALOG_ID, UPLOAD_ID, UploadSettings, VALUE, VIEW_ID, Virtualization, actionFailure, activeElement, addBlur, afterRequest, beforeDelete, beforeDownload, beforeRequest, clearAllInit, clearPathInit, closePopup, columnArray, copyFiles, createDeniedDialog, createDialog, createEmptyElement, createEnd, createExtDialog, createFolder, createImageDialog, createNewFolder, createVirtualDragElement, cutCopyInit, cutEnd, cutFiles, defaultToolbarItems, deleteEnd, deleteInit, destroy, detailsInit, doDeleteFiles, doDownload, doDownloadFiles, doPasteUpdate, doRename, download, downloadInit, dragCancel, dragEnd, dragHelper, dragStartHandler, dragStopHandler, dragging, draggingHandler, dropHandler, dropInit, dropPath, fileItems, fileType, filter, filterEnd, finalizeEnd, folderItems, generatePath, getAccessClass, getAccessDetails, getAllChildItems, getCssClass, getDirectories, getDirectoryPath, getDuplicateData, getFullPath, getImageUrl, getItemName, getLocaleText, getModule, getName, getObject, getParentPath, getParents, getPath, getPathId, getPathNames, getPathObject, getSortField, getSortedData, getTargetModule, getTargetPath, hasContentAccess, hasDownloadAccess, hasEditAccess, hasReadAccess, hasUploadAccess, hideLayout, hidePaste, initialEnd, isFile, isFileSystemData, layoutChange, layoutItems, layoutRefresh, menuItemData, methodCall, modelChanged, nodeExpand, objectToString, openAction, openEnd, openInit, openSearchFolder, paste, pasteEnd, pasteHandler, pasteInit, pathChanged, pathColumn, pathDrag, permissionCopy, permissionDownload, permissionEdit, permissionEditContents, permissionRead, permissionUpload, read, readDropPath, refresh, refreshEnd, removeActive, removeBlur, removeDropTarget, removeItemClass, rename, renameEnd, renameEndParent, renameInit, resizeEnd, scrollHandler, search, searchTextChange, searchWordHandler, selectAllInit, selectedData, selectionChanged, setDateObject, setNextPath, setNodeId, showPaste, skipUpload, sortByChange, sortColumn, sortComparer, sortbyClickHandler, splitterResize, treeSelect, triggerFetchFailure, triggerFetchSuccess, updateLayout, updatePath, updateRenamingData, updateSelectionData, updateTreeSelection, upload, uploadItem, validateSubFolder };
 //# sourceMappingURL=ej2-filemanager.es2015.js.map