@syncfusion/ej2-filemanager 25.2.3 → 26.1.35

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

@@ -13,7 +13,7 @@ import { Uploader, FileInfo } from '@syncfusion/ej2-inputs';
 import { UploadSettingsModel } from '../models/upload-settings-model';
 import { FileManagerModel } from './file-manager-model';
 import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, FileSelectionEventArgs } from './interface';
-import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';
+import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs, FolderCreateEventArgs, DeleteEventArgs, RenameEventArgs, MoveEventArgs, SearchEventArgs } from './interface';
 import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';
 import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';
 import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';
@@ -81,6 +81,10 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     nextPath: string[];
     fileAction: string;
     pasteNodes: string[];
+    responseData: {
+        [key: string]: Object;
+    };
+    existingFileCount: number;
     isLayoutChange: boolean;
     replaceItems: string[];
     createdItem: {
@@ -160,6 +164,16 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * }
      */
     ajaxSettings: AjaxSettingsModel;
+    /**
+     * Specifies the array of data to populate folders/files in the File Manager.
+     * The mandatory fields to be included in the JSON data are defined in fileData interface.
+     * This interface can be extended to add additional fields as required.
+     *
+     * @default []
+     */
+    fileSystemData: {
+        [key: string]: Object;
+    }[];
     /**
      * Enables or disables drag-and-drop of files.
      *
@@ -378,144 +392,199 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     /**
      * Triggers before the file/folder is rendered.
      *
-     * @event
+     * @event fileLoad
      */
     fileLoad: EmitType<FileLoadEventArgs>;
     /**
      * Triggers before the file/folder is opened.
      *
-     * @event
+     * @event fileOpen
      */
     fileOpen: EmitType<FileOpenEventArgs>;
     /**
      * Triggers before sending the download request to the server.
      *
-     * @event
+     * @event beforeDownload
      */
     beforeDownload: EmitType<BeforeDownloadEventArgs>;
     /**
      * Triggers before sending the getImage request to the server.
      *
-     * @event
+     * @event beforeImageLoad
      */
     beforeImageLoad: EmitType<BeforeImageLoadEventArgs>;
     /**
      * Triggers before the dialog is closed.
      *
-     * @event
+     * @event beforePopupClose
      */
     beforePopupClose: EmitType<BeforePopupOpenCloseEventArgs>;
     /**
      * Triggers before the dialog is opened.
      *
-     * @event
+     * @event beforePopupOpen
      */
     beforePopupOpen: EmitType<BeforePopupOpenCloseEventArgs>;
     /**
      * Triggers before sending the AJAX request to the server.
      *
-     * @event
+     * @event beforeSend
      */
     beforeSend: EmitType<BeforeSendEventArgs>;
     /**
      * Triggers when the file manager component is created.
      *
-     * @event
+     * @event created
      */
     created: EmitType<Object>;
+    /**
+     * This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application's use case.
+     *
+     * @event beforeFolderCreate
+     */
+    beforeFolderCreate: EmitType<FolderCreateEventArgs>;
+    /**
+     * This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder.
+     *
+     * @event folderCreate
+     */
+    folderCreate: EmitType<FolderCreateEventArgs>;
     /**
      * Triggers when the file manager component is destroyed.
      *
-     * @event
+     * @event destroyed
      */
     destroyed: EmitType<Object>;
+    /**
+     * This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here.
+     *
+     * @event beforeDelete
+     */
+    beforeDelete: EmitType<DeleteEventArgs>;
+    /**
+     * This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements' visibility can be managed here based on the application's use case.
+     *
+     * @event delete
+     */
+    delete: EmitType<DeleteEventArgs>;
+    /**
+     * This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option.
+     *
+     * @event beforeRename
+     */
+    beforeRename: EmitType<RenameEventArgs>;
+    /**
+     * This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file.
+     *
+     * @event rename
+     */
+    rename: EmitType<RenameEventArgs>;
+    /**
+     * This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action.
+     *
+     * @event beforeMove
+     */
+    beforeMove: EmitType<MoveEventArgs>;
+    /**
+     * This event is triggered when a file or folder is pasted into the destination path.
+     *
+     * @event move
+     */
+    move: EmitType<MoveEventArgs>;
+    /**
+     * This event is triggered when a search action occurs in the search bar of the File Manager component. It triggers each character entered in the input during the search process.
+     *
+     * @event search
+     */
+    search: EmitType<SearchEventArgs>;
     /**
      * Triggers when the file/folder dragging is started.
      *
-     * @event
+     * @event fileDragStart
      */
     fileDragStart: EmitType<FileDragEventArgs>;
     /**
      * Triggers while dragging the file/folder.
      *
-     * @event
+     * @event fileDragging
      */
     fileDragging: EmitType<FileDragEventArgs>;
     /**
      * Triggers when the file/folder is about to be dropped at the target.
      *
-     * @event
+     * @event fileDragStop
      */
     fileDragStop: EmitType<FileDragEventArgs>;
     /**
      * Triggers when the file/folder is dropped.
      *
-     * @event
+     * @event fileDropped
      */
     fileDropped: EmitType<FileDragEventArgs>;
     /**
      * Triggers before the file/folder is selected.
      *
-     * @event
+     * @event fileSelection
      */
     fileSelection: EmitType<FileSelectionEventArgs>;
     /**
      * Triggers when the file/folder is selected/unselected.
      *
-     * @event
+     * @event fileSelect
      */
     fileSelect: EmitType<FileSelectEventArgs>;
     /**
      * Triggers when the context menu item is clicked.
      *
-     * @event
+     * @event menuClick
      */
     menuClick: EmitType<MenuClickEventArgs>;
     /**
      * Triggers before the context menu is opened.
      *
-     * @event
+     * @event menuOpen
      */
     menuOpen: EmitType<MenuOpenEventArgs>;
     /**
      * Triggers when the AJAX request is failed.
      *
-     * @event
+     * @event failure
      */
     failure: EmitType<FailureEventArgs>;
     /**
      * Triggers when the dialog is closed.
      *
-     * @event
+     * @event popupClose
      */
     popupClose: EmitType<PopupOpenCloseEventArgs>;
     /**
      * Triggers when the dialog is opened.
      *
-     * @event
+     * @event popupOpen
      */
     popupOpen: EmitType<PopupOpenCloseEventArgs>;
     /**
      * Triggers when the AJAX request is success.
-     * @event
+     *
+     * @event success
      */
     success: EmitType<SuccessEventArgs>;
     /**
      * Triggers when the toolbar item is clicked.
      *
-     * @event
+     * @event toolbarClick
      */
     toolbarClick: EmitType<ToolbarClickEventArgs>;
     /**
      * Triggers before creating the toolbar.
      *
-     * @event
+     * @event toolbarCreate
      */
     toolbarCreate: EmitType<ToolbarCreateEventArgs>;
     /**
      * Triggers before rendering each file item in upload dialog box.
      *
-     * @event
+     * @event uploadListCreate
      */
     uploadListCreate: EmitType<UploadListCreateArgs>;
     constructor(options?: FileManagerModel, element?: string | HTMLElement);
@@ -740,6 +809,12 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @returns {void}
      */
     uploadFiles(): void;
+    /**
+     * Specifies the method which must be invoked to programmatically close the dialog popup in the file manager.
+     *
+     * @returns {void}
+     */
+    closeDialog(): void;
     /**
      * Specifies the direction of FileManager
      *

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

@@ -35,7 +35,7 @@ import * as events from './constant';
 import * as CLS from './classes';
 import { read, filter, createFolder } from '../common/operations';
 import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';
-import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';
+import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem, closePopup } from '../common/utility';
 import { ContextMenuSettings } from '../models/contextMenu-settings';
 import { BreadCrumbBar } from '../actions/breadcrumb-bar';
 import { ContextMenu } from '../pop-up/context-menu';
@@ -56,14 +56,13 @@ var FileManager = /** @class */ (function (_super) {
     __extends(FileManager, _super);
     function FileManager(options, element) {
         var _this = _super.call(this, options, element) || this;
-        // eslint-disable-next-line
         _this.filterData = null;
         _this.selectedNodes = [];
         _this.duplicateItems = [];
-        // eslint-disable-next-line
         _this.duplicateRecords = [];
         _this.previousPath = [];
         _this.nextPath = [];
+        _this.existingFileCount = 0;
         _this.isLayoutChange = false;
         _this.layoutSelectedItems = [];
         _this.renamedId = null;
@@ -85,11 +84,9 @@ var FileManager = /** @class */ (function (_super) {
         _this.isOpened = false;
         _this.isRetryOpened = false;
         _this.isPathDrag = false;
-        // eslint-disable-next-line
         _this.searchedItems = [];
         _this.retryFiles = [];
         _this.isApplySame = false;
-        // eslint-disable-next-line
         _this.dragData = [];
         _this.dragNodes = [];
         _this.dragPath = '';
@@ -99,11 +96,10 @@ var FileManager = /** @class */ (function (_super) {
         _this.dragCursorPosition = { left: 44, top: 18 };
         _this.isDropEnd = false;
         _this.dragCount = 0;
-        // eslint-disable-next-line
         _this.droppedObjects = [];
         _this.uploadingCount = 0;
         _this.uploadedCount = 0;
-        //Specifies whether the operating system is MAC or not 
+        //Specifies whether the operating system is MAC or not
         _this.isMac = false;
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu);
         return _this;
@@ -497,7 +493,6 @@ 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 }, { 'filename': args.fileData.name }];
         var uploadUrl = this.ajaxSettings.uploadUrl ? this.ajaxSettings.uploadUrl : this.ajaxSettings.url;
-        // eslint-disable-next-line
         var ajaxSettings = {
             url: uploadUrl,
             type: 'POST',
@@ -513,7 +508,6 @@ var FileManager = /** @class */ (function (_super) {
         this.trigger('beforeSend', this.uploadEventArgs, function (uploadEventArgs) {
             args.customFormData = JSON.parse(getValue('data', uploadEventArgs.ajaxSettings));
             args.cancel = uploadEventArgs.cancel;
-            // eslint-disable-next-line
             var eventArgs = {
                 cancel: false,
                 httpRequest: args.currentRequest
@@ -550,7 +544,6 @@ var FileManager = /** @class */ (function (_super) {
         }
         this.uploadingCount = args.filesData.length;
         this.uploadedCount = 0;
-        // eslint-disable-next-line
         var details = getPathObject(this);
         if (!hasUploadAccess(details)) {
             args.cancel = true;
@@ -559,7 +552,6 @@ var FileManager = /** @class */ (function (_super) {
         }
         this.uploadDialogObj.show();
     };
-    // eslint-disable-next-line
     FileManager.prototype.onFileUploadSuccess = function (args) {
         this.uploadedCount = this.uploadedCount + args.count;
         if (this.uploadSettings.autoClose && (this.uploadingCount === this.uploadedCount)) {
@@ -567,7 +559,6 @@ var FileManager = /** @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     FileManager.prototype.onUploadSuccess = function (files) {
         var args = { action: 'Upload', result: files };
         this.trigger('success', args);
@@ -579,9 +570,7 @@ var FileManager = /** @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     FileManager.prototype.onUploadFailure = function (files) {
-        // eslint-disable-next-line
         var response = getValue('response', files);
         var statusText = getValue('statusText', response);
         if (statusText !== '') {
@@ -665,7 +654,7 @@ var FileManager = /** @class */ (function (_super) {
                 break;
             case 'ctrlU':
                 e.preventDefault();
-                if (this.toolbarSettings.items.indexOf('Upload') != -1) {
+                if (this.toolbarSettings.items.indexOf('Upload') !== -1) {
                     uploadEle = select('#' + this.element.id + CLS.UPLOAD_ID, this.element);
                     uploadEle.click();
                 }
@@ -699,7 +688,6 @@ var FileManager = /** @class */ (function (_super) {
      * @private
      */
     /* istanbul ignore next */
-    // eslint:disable-next-line
     FileManager.prototype.onPropertyChanged = function (newProp, oldProp) {
         var height;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -832,6 +820,10 @@ var FileManager = /** @class */ (function (_super) {
                         this.viewerObj.target = newProp.popupTarget;
                     }
                     break;
+                case 'fileSystemData':
+                    this.fileSystemData = newProp.fileSystemData;
+                    this.refresh();
+                    break;
             }
         }
     };
@@ -917,7 +909,6 @@ var FileManager = /** @class */ (function (_super) {
      */
     FileManager.prototype.createFolder = function (name) {
         this.notify(events.methodCall, { action: 'createFolder' });
-        // eslint-disable-next-line
         var details = [getPathObject(this)];
         this.itemData = details;
         if (name) {
@@ -1040,7 +1031,6 @@ var FileManager = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    // eslint-disable-next-line
     FileManager.prototype.filterFiles = function (filterData) {
         this.filterData = filterData ? filterData : null;
         this.setProperties({ selectedItems: [] }, true);
@@ -1056,7 +1046,6 @@ var FileManager = /** @class */ (function (_super) {
      *
      * @returns {Object[]} - returns selected files.
      */
-    // eslint-disable-next-line
     FileManager.prototype.getSelectedFiles = function () {
         this.notify(events.updateSelectionData, {});
         return this.itemData;
@@ -1128,11 +1117,18 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.uploadFiles = function () {
-        // eslint-disable-next-line
         var details = [getPathObject(this)];
         this.itemData = details;
         uploadItem(this);
     };
+    /**
+     * Specifies the method which must be invoked to programmatically close the dialog popup in the file manager.
+     *
+     * @returns {void}
+     */
+    FileManager.prototype.closeDialog = function () {
+        closePopup(this);
+    };
     /**
      * Specifies the direction of FileManager
      *
@@ -1155,6 +1151,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Complex({}, AjaxSettings)
     ], FileManager.prototype, "ajaxSettings", void 0);
+    __decorate([
+        Property([])
+    ], FileManager.prototype, "fileSystemData", void 0);
     __decorate([
         Property(false)
     ], FileManager.prototype, "allowDragAndDrop", void 0);
@@ -1260,9 +1259,36 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], FileManager.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeFolderCreate", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "folderCreate", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "destroyed", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeDelete", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "delete", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeRename", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "rename", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeMove", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "move", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "search", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "fileDragStart", void 0);