@syncfusion/ej2-image-editor 21.2.6 → 21.2.10

package/dist/es6/ej2-image-editor.es2015.js

@@ -6212,7 +6212,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         if (this.disabled) {
             this.element.setAttribute('class', 'e-disabled');
         }
-        this.trigger('fileOpened', fileOpened);
+        if (this.isImageLoaded && this.element.style.opacity !== '0.5') {
+            this.trigger('fileOpened', fileOpened);
+        }
         if (this.zoomSettings.zoomFactor !== 1 || !isNullOrUndefined(this.zoomSettings.zoomPoint)) {
             this.zoom(this.zoomSettings.zoomFactor, this.zoomSettings.zoomPoint);
         }
@@ -6456,10 +6458,33 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     }
     fileSelect(inputElement, args) {
         if (!this.disabled) {
-            showSpinner(this.element);
-            this.element.style.opacity = '0.5';
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             const filesData = args.target.files[0];
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            const fileData = filesData;
+            if (!isNullOrUndefined(fileData.name.split('.')) &&
+                !isNullOrUndefined(fileData.name.split('.')[1]) &&
+                fileData.name.split('.')[1].toLowerCase() !== 'jpg' &&
+                fileData.name.split('.')[1].toLowerCase() !== 'jpeg' &&
+                fileData.name.split('.')[1].toLowerCase() !== 'png' &&
+                fileData.name.split('.')[1].toLowerCase() !== 'svg') {
+                return;
+            }
+            showSpinner(this.element);
+            this.element.style.opacity = '0.5';
+            if (!isNullOrUndefined(fileData.name.split('.')) &&
+                !isNullOrUndefined(fileData.name.split('.')[1])) {
+                const fileType = this.toPascalCase(fileData.name.split('.')[1]);
+                if (fileType === 'JPG' || fileType === 'Jpg') {
+                    this.fileType = 'Jpeg';
+                }
+                else {
+                    this.fileType = fileType;
+                }
+            }
+            else {
+                this.fileType = null;
+            }
             if (this.isImageLoaded) {
                 this.isImageLoaded = false;
                 this.reset();
@@ -8089,17 +8114,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         if (this.degree === 0 || this.degree === 180) {
             if (!isNullOrUndefined(this.activeObj.shape)) {
                 this.setZoomDimension(-0.1, this.activeObj);
-                if (this.destLeft > this.activeObj.activePoint.startX || this.destTop > this.activeObj.activePoint.startY ||
-                    this.destLeft + this.destWidth < this.activeObj.activePoint.endX || this.destTop + this.destHeight <
-                    this.activeObj.activePoint.endY) {
-                    zoomOut.classList.add('e-disabled');
-                    zoomOut.parentElement.classList.add('e-overlay');
-                    isDisabled = true;
-                }
-                else {
-                    zoomOut.classList.remove('e-disabled');
-                    zoomOut.parentElement.classList.remove('e-overlay');
-                    isDisabled = false;
+                if (!isNullOrUndefined(zoomOut)) {
+                    if (this.destLeft > this.activeObj.activePoint.startX || this.destTop > this.activeObj.activePoint.startY ||
+                        this.destLeft + this.destWidth < this.activeObj.activePoint.endX || this.destTop + this.destHeight <
+                        this.activeObj.activePoint.endY) {
+                        zoomOut.classList.add('e-disabled');
+                        zoomOut.parentElement.classList.add('e-overlay');
+                        isDisabled = true;
+                    }
+                    else {
+                        zoomOut.classList.remove('e-disabled');
+                        zoomOut.parentElement.classList.remove('e-overlay');
+                        isDisabled = false;
+                    }
                 }
             }
             else {
@@ -13281,10 +13308,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 else {
                     this.fileName = 'ImageEditor';
                 }
+                if (!isNullOrUndefined(data.split('.')) &&
+                    !isNullOrUndefined(data.split('.')[2])) {
+                    const fileType = this.toPascalCase(data.split('.')[2]);
+                    if (fileType === 'JPG' || fileType === 'Jpg') {
+                        this.fileType = 'Jpeg';
+                    }
+                    else {
+                        this.fileType = fileType;
+                    }
+                }
+                else {
+                    this.fileType = null;
+                }
                 this.imageOnLoad(data);
             }
             else {
                 this.fileName = 'ImageEditor';
+                this.fileType = null;
                 this.lowerCanvas = document.querySelector('#' + this.element.id + '_lowerCanvas');
                 this.upperCanvas = document.querySelector('#' + this.element.id + '_upperCanvas');
                 this.lowerContext = this.lowerCanvas.getContext('2d');
@@ -13434,7 +13475,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             if (!isNullOrUndefined(document.getElementById(this.element.id + '_quickAccessToolbarArea'))) {
                 document.getElementById(this.element.id + '_quickAccessToolbarArea').style.display = 'none';
             }
+            this.isImageLoaded = false;
             this.updateCanvas();
+            this.isImageLoaded = true;
             this.refreshDropDownBtn(false);
             this.enableDisableToolbarBtn();
         }