@syncfusion/ej2-image-editor 27.2.5 → 28.1.33

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.5
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.33
+*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@27.2.3",
+  "_id": "@syncfusion/ej2-image-editor@27.1.50",
   "_inBundle": false,
-  "_integrity": "sha512-vakrP1C7mO3m0xWdmuSB+dDqk3tdgsJLXwvkkBx8kkST4zLm4BlfEs35biPq7QQAGapcHg8mlY5zE4GhJAlTtg==",
+  "_integrity": "sha512-x622GmMcwomW7xoMMGdKgFdB1aohctBixqEe8Z3X8LB3IbfFNoLR8pnz8tUrucjlDRA4p/cfsudWrnzXBfMiMg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,22 +23,22 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.2.3.tgz",
-  "_shasum": "e8a23ddd9e7615dfd1bac7137a0af8fe68078762",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-27.1.50.tgz",
+  "_shasum": "ed81a3b2eaa472e18ce7b776307ce73d73332a94",
   "_spec": "@syncfusion/ej2-image-editor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.5",
-    "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-dropdowns": "~27.2.5",
-    "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-navigations": "~27.2.5",
-    "@syncfusion/ej2-popups": "~27.2.2",
-    "@syncfusion/ej2-splitbuttons": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.33",
+    "@syncfusion/ej2-dropdowns": "~28.1.33",
+    "@syncfusion/ej2-inputs": "~28.1.33",
+    "@syncfusion/ej2-navigations": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33",
+    "@syncfusion/ej2-splitbuttons": "~28.1.33"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "27.2.5",
+  "version": "28.1.33",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/draw.d.ts

@@ -55,6 +55,7 @@ export declare class Draw {
     private imageBackgroundColor;
     private tempStrokeWidth;
     private allowRedactStraighten;
+    private isNullExtension;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -146,6 +147,9 @@ export declare class Draw {
     private applyDialogOption;
     private showDialogPopup;
     private restoreOldImage;
+    private handleFileSize;
+    private openImageData;
+    private getImageSize;
     private open;
     private getInitialLoaded;
     private getFileExtensionFromURL;

package/src/image-editor/action/draw.js

@@ -73,6 +73,7 @@ var Draw = /** @class */ (function () {
         this.tempPointColl = {};
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
+        this.isNullExtension = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -350,6 +351,9 @@ var Draw = /** @class */ (function () {
             case 'setTempStrokeWidth':
                 this.tempStrokeWidth = args.value['strokeWidth'];
                 break;
+            case 'setNullExtension':
+                this.isNullExtension = args.value['extension'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -374,6 +378,7 @@ var Draw = /** @class */ (function () {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = this.isResizeSelect = false;
         this.isShapeTextInserted = false;
         this.isImageApply = false;
+        this.isNullExtension = true;
         this.initZoomValue = null;
         this.tempFilter = '';
         this.origDim = { width: 0, height: 0 };
@@ -1555,8 +1560,8 @@ var Draw = /** @class */ (function () {
         var angle = Math.atan2(this.dy, this.dx);
         var isStartArrowSolid = actObj.start === 'arrowSolid';
         var isEndArrowSolid = actObj.end === 'arrowSolid';
-        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         var isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        var isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
             (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
@@ -3890,7 +3895,7 @@ var Draw = /** @class */ (function () {
         }
         var obj = { defToolbarItems: null };
         parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
-        if (obj['defToolbarItems'].length === 0 &&
+        if (obj['defToolbarItems'] && obj['defToolbarItems'].length === 0 &&
             (isNullOrUndefined(document.getElementById(id + '_toolbar'))) &&
             parent.element.querySelector('#' + id + '_toolbarArea')) {
             var height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
@@ -3920,7 +3925,7 @@ var Draw = /** @class */ (function () {
                     this.fileType = 'Jpeg';
                     fileType = 'jpeg';
                 }
-                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg') {
+                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp') {
                     this.fileType = null;
                 }
             }
@@ -4025,19 +4030,96 @@ var Draw = /** @class */ (function () {
         dialog.appendTo('#' + parent.element.id + '_dialog');
     };
     Draw.prototype.restoreOldImage = function () {
-        if (this.parent.isImageLoaded) {
-            this.reset();
-            this.openNewImage();
+        var _this = this;
+        var parent = this.parent;
+        var dropArea = document.getElementById(this.parent.element.id + '_dropArea');
+        var extension = parent.getExtensionArray();
+        var openURLType = typeof this.openURL;
+        if (openURLType !== 'string') {
+            this.openImageData(dropArea);
+            return;
+        }
+        var fileType = this.getFileExtensionFromURL(this.openURL).toLowerCase();
+        if (fileType) {
+            fileType = (fileType === 'jpg' || fileType === 'jpeg') ? 'jpeg' : fileType;
+        }
+        var isAllowedFileType = (fileType ? (extension.indexOf(fileType) > -1 ||
+            (fileType === 'jpeg' && (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1))) : false) || this.isNullExtension;
+        if (this.openURL.indexOf('data:image/') > -1 && this.openURL.indexOf('base64') > -1) {
+            this.openImageData(dropArea, true);
+        }
+        else if (parent.uploadSettings.minFileSize || parent.uploadSettings.maxFileSize) {
+            this.getImageSizeFromURL(this.openURL.toString(), function (imageSizeMB) {
+                var isInvalidSize = (parent.uploadSettings.minFileSize && imageSizeMB < parent.uploadSettings.minFileSize) ||
+                    (parent.uploadSettings.maxFileSize && imageSizeMB > parent.uploadSettings.maxFileSize);
+                _this.handleFileSize(!isAllowedFileType || isInvalidSize, dropArea, !isAllowedFileType);
+            });
+        }
+        else {
+            this.handleFileSize(!isAllowedFileType, dropArea, !isAllowedFileType);
+        }
+    };
+    Draw.prototype.handleFileSize = function (isError, dropArea, fileTypeError) {
+        var parent = this.parent;
+        if (isError) {
+            this.errorLoading();
+            parent.showDialogPopup('unsupported', fileTypeError);
+            if (dropArea && !parent.isImageLoaded) {
+                dropArea.style.display = 'block';
+            }
         }
         else {
+            if (dropArea) {
+                dropArea.style.display = 'none';
+            }
+            if (this.parent.isImageLoaded) {
+                this.reset();
+            }
             this.openNewImage();
         }
     };
-    Draw.prototype.open = function (data) {
-        var dropArea = document.getElementById(this.parent.element.id + '_dropArea');
-        if (dropArea) {
-            dropArea.style.display = 'none';
+    Draw.prototype.openImageData = function (dropArea, isBase64) {
+        var parent = this.parent;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
+        var canvas = parent.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        if (!parent.uploadSettings.minFileSize && !parent.uploadSettings.maxFileSize) {
+            this.handleFileSize(false, dropArea, false);
+            return;
+        }
+        if (isBase64) {
+            var img_1 = new Image();
+            img_1.src = this.openURL;
+            img_1.onload = function () {
+                ctx.canvas.width = img_1.width;
+                ctx.canvas.height = img_1.height;
+                ctx.drawImage(img_1, 0, 0);
+                proxy.getImageSize(canvas, dropArea);
+            };
         }
+        else {
+            canvas.width = this.openURL.width;
+            canvas.height = this.openURL.height;
+            ctx.putImageData(this.openURL, 0, 0);
+            this.getImageSize(canvas, dropArea);
+        }
+    };
+    Draw.prototype.getImageSize = function (canvas, dropArea) {
+        var parent = this.parent;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        canvas.toBlob((function (blob) {
+            if ((parent.uploadSettings.minFileSize && blob.size < parent.uploadSettings.minFileSize) ||
+                (parent.uploadSettings.maxFileSize && blob.size > parent.uploadSettings.maxFileSize)) {
+                this.handleFileSize(true, dropArea, false);
+            }
+            else {
+                this.handleFileSize(false, dropArea, false);
+            }
+        }).bind(this), 'image/jpeg', 1);
+    };
+    Draw.prototype.open = function (data) {
         if (!this.parent.disabled) {
             this.openURL = data;
             this.restoreOldImage();
@@ -4080,7 +4162,11 @@ var Draw = /** @class */ (function () {
                 var fileExtensionArray = fileData.name.split('.');
                 fileExtension = fileExtensionArray[fileExtensionArray.length - 1].toLowerCase();
             }
-            if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+            var extension = parent.getExtensionArray();
+            var isJPG = ((fileExtension === 'jpg' || fileExtension === 'jpeg') && (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 || parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1));
+            if ((fileExtension && (extension.indexOf(fileExtension) === -1 && !isJPG)) ||
+                ((parent.uploadSettings.minFileSize && fileData.size < parent.uploadSettings.minFileSize) ||
+                    (parent.uploadSettings.maxFileSize && fileData.size > parent.uploadSettings.maxFileSize))) {
                 this.errorLoading();
                 return;
             }

package/src/image-editor/action/export.js

@@ -135,7 +135,7 @@ var Export = /** @class */ (function () {
             this.imageQuality = imgQuality ? imgQuality : null;
         }
         var tempCanvas = this.exportToCanvas();
-        var imagetype = type !== 'jpeg' ? 'image/png' : 'image/jpeg';
+        var imagetype = (type === 'jpeg' ? 'image/jpeg' : (type === 'webp' ? 'image/webp' : 'image/png'));
         // eslint-disable-next-line @typescript-eslint/tslint/config
         tempCanvas.toBlob(function (blob) {
             var blobUrl = URL.createObjectURL(blob);

package/src/image-editor/action/shape.d.ts

@@ -34,8 +34,8 @@ export declare class Shape {
     private setPointCollForLineAndArrow;
     private prevObjColl;
     private drawShapeText;
-    private setTransformColl;
     private drawShapeImageEvent;
+    private setTransformColl;
     private drawShapeTextEvent;
     private initializeTextShape;
     private drawImage;

package/src/image-editor/action/shape.js

@@ -641,20 +641,6 @@ var Shape = /** @class */ (function () {
             parent.isPublicMethod = false;
         }
     };
-    Shape.prototype.setTransformColl = function (transformCollection) {
-        var parent = this.parent;
-        parent.activeObj.rotateFlipColl = [];
-        if (transformCollection) {
-            for (var i = 0; i < transformCollection.length; i++) {
-                if (transformCollection[i].degree) {
-                    parent.activeObj.rotateFlipColl.push(transformCollection[i].degree);
-                }
-                else {
-                    parent.activeObj.rotateFlipColl.push(transformCollection[i].flip.toLowerCase());
-                }
-            }
-        }
-    };
     Shape.prototype.drawShapeImageEvent = function (shapeChangingArgs, isSelect) {
         var parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -678,6 +664,20 @@ var Shape = /** @class */ (function () {
         }
         parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
     };
+    Shape.prototype.setTransformColl = function (transformCollection) {
+        var parent = this.parent;
+        parent.activeObj.rotateFlipColl = [];
+        if (transformCollection) {
+            for (var i = 0; i < transformCollection.length; i++) {
+                if (transformCollection[i].degree) {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].degree);
+                }
+                else {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].flip.toLowerCase());
+                }
+            }
+        }
+    };
     Shape.prototype.drawShapeTextEvent = function (shapeChangingArgs) {
         var parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -1689,6 +1689,13 @@ var Shape = /** @class */ (function () {
     };
     Shape.prototype.renderTextArea = function (x, y, actObj) {
         var parent = this.parent;
+        var shapeObj = { shapeSettingsObj: {} };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: shapeObj } });
+        var shapeSettings = shapeObj['shapeSettingsObj'];
+        var shapeChangingArgs = { cancel: false, action: 'text-edit', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
         var degree = this.getRotDegOfShape(parent.activeObj);
         this.transformTextArea();
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
@@ -2287,7 +2294,7 @@ var Shape = /** @class */ (function () {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var fileData = filesData;
         var fileExtension = fileData.name && fileData.name.split('.').pop().toLowerCase();
-        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp'].indexOf(fileExtension) === -1) {
             this.refreshActiveObj();
             return;
         }

package/src/image-editor/action/transform.js

@@ -1561,6 +1561,7 @@ var Transform = /** @class */ (function () {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             }
         }
+        parent.updateDropInfoContent(parent.element.querySelector('.e-ie-drop-info'));
         var tempFilter = this.lowerContext.filter;
         var canvasWrapper = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
         if (canvasWrapper) {

package/src/image-editor/base/enum.d.ts

@@ -9,7 +9,9 @@ export declare enum FileType {
     /** The JPEG file type. */
     Jpeg = "Jpeg",
     /** The SVG file type. */
-    Svg = "Svg"
+    Svg = "Svg",
+    /** The WebP file type. */
+    WebP = "WebP"
 }
 /**
  * An enumeration representing the direction of an image editor operation.
@@ -95,7 +97,11 @@ export declare enum Theme {
     /** The Fluent 2.0 UI theme. */
     Fluent2 = "Fluent2",
     /** The dark variant of the Fluent 2.0 UI theme. */
-    Fluent2Dark = "Fluent2Dark"
+    Fluent2Dark = "Fluent2Dark",
+    /** The Tailwind 3 UI theme. */
+    Tailwind3 = "Tailwind3",
+    /** The dark variant of the Tailwind 3 UI theme. */
+    Tailwind3Dark = "Tailwind3Dark"
 }
 /**
  * An enum representing the available toolbar commands in the image editor.

package/src/image-editor/base/enum.js

@@ -11,6 +11,8 @@ export var FileType;
     FileType["Jpeg"] = "Jpeg";
     /** The SVG file type. */
     FileType["Svg"] = "Svg";
+    /** The WebP file type. */
+    FileType["WebP"] = "WebP";
 })(FileType || (FileType = {}));
 /**
  * An enumeration representing the direction of an image editor operation.
@@ -101,6 +103,10 @@ export var Theme;
     Theme["Fluent2"] = "Fluent2";
     /** The dark variant of the Fluent 2.0 UI theme. */
     Theme["Fluent2Dark"] = "Fluent2Dark";
+    /** The Tailwind 3 UI theme. */
+    Theme["Tailwind3"] = "Tailwind3";
+    /** The dark variant of the Tailwind 3 UI theme. */
+    Theme["Tailwind3Dark"] = "Tailwind3Dark";
 })(Theme || (Theme = {}));
 /**
  * An enum representing the available toolbar commands in the image editor.

package/src/image-editor/base/image-editor-model.d.ts

@@ -1,6 +1,44 @@
 import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
+/**
+ * Interface for a class UploadSettings
+ */
+export interface UploadSettingsModel {
+
+    /**
+     * Specifies the allowed file extensions for uploaded images.
+     *
+     * @type {string}
+     * @default null
+     * @remarks
+     * Example: '.jpg, .png, .gif'
+     * This property restricts the types of image files that can be uploaded based on their file extensions. Only files with the specified extensions will be allowed.
+     */
+    allowedExtensions?: string;
+
+    /**
+     * Specifies the minimum size (in bytes) for the uploaded image.
+     *
+     * @type {number}
+     * @default null
+     * @remarks
+     * The value represents the file size in bytes. Any file smaller than this size will be rejected during the upload process. Use this property to ensure that images meet a certain quality or resolution standard.
+     */
+    minFileSize?: number;
+
+    /**
+     * Specifies the maximum size (in bytes) for the uploaded image.
+     *
+     * @type {number}
+     * @default null
+     * @remarks
+     * The value represents the file size in bytes. Any file larger than this size will be rejected during the upload process. This property helps prevent the upload of excessively large files that may impact performance.
+     */
+    maxFileSize?: number;
+
+}
+
 /**
  * Interface for a class FinetuneSettings
  */
@@ -489,6 +527,19 @@ export interface ImageEditorModel extends ComponentModel{
      */
     fontFamily?: FontFamilyModel;
 
+    /**
+     * Represents the settings for configuring image uploads.
+     *
+     * This object allows you to specify restrictions on the types and sizes of images that can be uploaded, ensuring that only valid files are accepted according to the defined criteria.
+     *
+     * The following options are available in `uploadSettings`.
+     * - allowedExtensions: Specifies the allowed file extensions for uploaded images. The default value is null.
+     * - minFileSize: Specifies the minimum size (in bytes) for the uploaded image. The default value is null.
+     * - maxFileSize: Specifies the maximum size (in bytes) for the uploaded image. The default value is null.
+     *
+     */
+    uploadSettings?: UploadSettingsModel;
+
     /**
      * Event callback that is raised before an image is saved.
      *

package/src/image-editor/base/image-editor.d.ts

@@ -2,7 +2,7 @@ import { Component, INotifyPropertyChanged, ModuleDeclaration } from '@syncfusio
 import { EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { ChildProperty } from '@syncfusion/ej2-base';
-import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel, FontFamilyModel } from './image-editor-model';
+import { ImageEditorModel, FinetuneSettingsModel, ZoomSettingsModel, SelectionSettingsModel, FontFamilyModel, UploadSettingsModel } from './image-editor-model';
 import { SelectionChangeEventArgs, Transition, ArrowheadType, ResizeEventArgs, FrameType, FrameLineStyle, FrameChangeEventArgs, ShapeType, ImageSettings, RedactType, TransformationCollection } from './../index';
 import { ZoomEventArgs, PanEventArgs, CropEventArgs, RotateEventArgs, FlipEventArgs, ShapeChangeEventArgs } from './../index';
 import { ToolbarEventArgs, OpenEventArgs, SaveEventArgs, BeforeSaveEventArgs, Point, ShapeSettings, ImageFilterEventArgs, RedactSettings } from './../index';
@@ -10,6 +10,39 @@ import { FinetuneEventArgs, QuickAccessToolbarEventArgs, CurrentObject, ImageDim
 import { Interaction, SelectionPoint, ImageFinetuneValue, Dimension, ActivePoint, ImageEditorClickEventArgs, FrameValue } from './../index';
 import { Direction, ZoomTrigger, Theme, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, EditCompleteEventArgs } from './../index';
 import { ItemModel as DropDownButtonItemModel } from '@syncfusion/ej2-splitbuttons';
+/**
+ * Defines the settings for restricting uploaded images.
+ */
+export declare class UploadSettings extends ChildProperty<UploadSettings> {
+    /**
+     * Specifies the allowed file extensions for uploaded images.
+     *
+     * @type {string}
+     * @default null
+     * @remarks
+     * Example: '.jpg, .png, .gif'
+     * This property restricts the types of image files that can be uploaded based on their file extensions. Only files with the specified extensions will be allowed.
+     */
+    allowedExtensions: string;
+    /**
+     * Specifies the minimum size (in bytes) for the uploaded image.
+     *
+     * @type {number}
+     * @default null
+     * @remarks
+     * The value represents the file size in bytes. Any file smaller than this size will be rejected during the upload process. Use this property to ensure that images meet a certain quality or resolution standard.
+     */
+    minFileSize: number;
+    /**
+     * Specifies the maximum size (in bytes) for the uploaded image.
+     *
+     * @type {number}
+     * @default null
+     * @remarks
+     * The value represents the file size in bytes. Any file larger than this size will be rejected during the upload process. This property helps prevent the upload of excessively large files that may impact performance.
+     */
+    maxFileSize: number;
+}
 /**
  * This interface is used to specify settings for finetuning operations on images, including brightness, contrast, hue, saturation, exposure, opacity, and blur. It includes properties for setting minimum and maximum values for each of these options, as well as a default value.
  */
@@ -660,6 +693,18 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * Predefine the font families that populate in font family dropdown list from the toolbar.
      */
     fontFamily: FontFamilyModel;
+    /**
+     * Represents the settings for configuring image uploads.
+     *
+     * This object allows you to specify restrictions on the types and sizes of images that can be uploaded, ensuring that only valid files are accepted according to the defined criteria.
+     *
+     * The following options are available in `uploadSettings`.
+     * - allowedExtensions: Specifies the allowed file extensions for uploaded images. The default value is null.
+     * - minFileSize: Specifies the minimum size (in bytes) for the uploaded image. The default value is null.
+     * - maxFileSize: Specifies the maximum size (in bytes) for the uploaded image. The default value is null.
+     *
+     */
+    uploadSettings: UploadSettingsModel;
     /**
      * Event callback that is raised before an image is saved.
      *
@@ -895,10 +940,34 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * Show dialog popup for unsupported files.
      *
      * @param { string } type - Specifies the type of error.
+     * @param { boolean } fileTypeError - Specifies the error is due to file type.
      * @hidden
      * @returns {void}.
      */
-    showDialogPopup(type?: string): void;
+    showDialogPopup(type?: string, fileTypeError?: boolean): void;
+    /**
+     * Returns bytes in string format.
+     *
+     * @param { number } bytes - Specifies the bytes.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    formatSizeUnits(bytes: number): string;
+    /**
+     * Returns allowed file type extensions in string[].
+     *
+     * @hidden
+     * @returns {string[]}.
+     */
+    getExtensionArray(): string[];
+    /**
+     * Returns allowed file type extensions in string.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    getExtensionString(): string;
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -1545,6 +1614,14 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * A font size collections.
      */
     getFontSizes(): DropDownButtonItemModel[];
+    /**
+     * Updates drop area content dynamically.
+     *
+     * @param { HTMLElement } dropInfoElement - Specifies the drop area element.
+     * @hidden
+     * @returns {void}.
+     */
+    updateDropInfoContent(dropInfoElement: HTMLElement): void;
     /**
      * Handles the OK button operation
      *