@syncfusion/ej2-image-editor 27.2.3 → 28.1.33

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

@@ -1000,6 +1000,7 @@ var Draw = /** @__PURE__ @class */ (function () {
         this.tempPointColl = {};
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
+        this.isNullExtension = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -1277,6 +1278,9 @@ var Draw = /** @__PURE__ @class */ (function () {
             case 'setTempStrokeWidth':
                 this.tempStrokeWidth = args.value['strokeWidth'];
                 break;
+            case 'setNullExtension':
+                this.isNullExtension = args.value['extension'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -1301,6 +1305,7 @@ var Draw = /** @__PURE__ @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 };
@@ -2482,8 +2487,8 @@ var Draw = /** @__PURE__ @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);
@@ -4813,7 +4818,7 @@ var Draw = /** @__PURE__ @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;
@@ -4843,7 +4848,7 @@ var Draw = /** @__PURE__ @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;
                 }
             }
@@ -4948,19 +4953,96 @@ var Draw = /** @__PURE__ @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();
@@ -5003,7 +5085,11 @@ var Draw = /** @__PURE__ @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;
             }
@@ -6327,7 +6413,7 @@ var Export = /** @__PURE__ @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);
@@ -15066,20 +15152,6 @@ var Shape = /** @__PURE__ @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);
@@ -15103,6 +15175,20 @@ var Shape = /** @__PURE__ @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);
@@ -16114,6 +16200,13 @@ var Shape = /** @__PURE__ @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 });
@@ -16712,7 +16805,7 @@ var Shape = /** @__PURE__ @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;
         }
@@ -19964,6 +20057,7 @@ var Transform = /** @__PURE__ @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) {
@@ -21811,6 +21905,25 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/**
+ * Defines the settings for restricting uploaded images.
+ */
+var UploadSettings = /** @__PURE__ @class */ (function (_super) {
+    __extends(UploadSettings, _super);
+    function UploadSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], UploadSettings.prototype, "allowedExtensions", void 0);
+    __decorate([
+        Property(null)
+    ], UploadSettings.prototype, "minFileSize", void 0);
+    __decorate([
+        Property(null)
+    ], UploadSettings.prototype, "maxFileSize", void 0);
+    return UploadSettings;
+}(ChildProperty));
 /**
  * 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.
  */
@@ -22285,6 +22398,24 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                         this.quickAccessToolbarTemplateFn();
                     }
                     break;
+                case 'uploadSettings':
+                    if (newProperties.uploadSettings) {
+                        this.uploadSettings = newProperties.uploadSettings;
+                        if (!this.uploadSettings.allowedExtensions) {
+                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+                            this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
+                        }
+                        else {
+                            this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
+                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
+                    else {
+                        this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
+                    }
+                    this.updateDropInfoContent(this.element.querySelector('.e-ie-drop-info'));
+                    break;
             }
         }
     };
@@ -22319,6 +22450,12 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('toolbar', { prop: 'create-toolbar', onPropertyChange: false });
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
+        if (!this.uploadSettings.allowedExtensions) {
+            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+        }
+        else {
+            this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
+        }
         this.createCanvas();
         if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
             this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
@@ -22368,17 +22505,28 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     };
     ImageEditor.prototype.createDropUploader = function () {
         var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var proxy = this;
         var uploadObj = new Uploader({
             dropArea: this.element.getElementsByClassName('e-canvas-wrapper')[0],
-            allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            allowedExtensions: this.uploadSettings.allowedExtensions,
             multiple: false,
             selected: function (args) {
                 if (args.event.type === 'change' || args.event.type === 'drop') {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var type = args.filesData[0].type;
                     var errType = 'unsupported';
+                    var extension = _this.getExtensionArray();
+                    var isAllowedFileType = (extension.indexOf(type) > -1 ||
+                        (type === 'jpeg' && (proxy.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                            proxy.uploadSettings.allowedExtensions.indexOf('jpeg') > -1)));
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    var size = args.filesData[0].size;
+                    var isInvalidSize = (proxy.uploadSettings.minFileSize && size < proxy.uploadSettings.minFileSize) ||
+                        (proxy.uploadSettings.maxFileSize && size > proxy.uploadSettings.maxFileSize);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg')) {
+                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && isAllowedFileType &&
+                        !isInvalidSize) {
                         _this.notify('draw', { prop: 'fileSelect', value: { inputElement: _this.element.querySelector('#' + _this.element.id + '_dropfileUpload'), args: args } });
                     }
                     else {
@@ -22386,7 +22534,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                         if (args.event.type === 'drop' && args.event.dataTransfer.files.length > 1) {
                             errType = 'multi-select-image';
                         }
-                        _this.showDialogPopup(errType);
+                        _this.showDialogPopup(errType, !isAllowedFileType);
                     }
                 }
             }
@@ -22400,10 +22548,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * 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}.
      */
-    ImageEditor.prototype.showDialogPopup = function (type) {
+    ImageEditor.prototype.showDialogPopup = function (type, fileTypeError) {
         var content = '';
         this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
         var headerObj;
@@ -22423,16 +22572,38 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
             var supportObj = { key: 'SupportText' };
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+            var extension = this.getExtensionString();
+            var fileSizeObj = { key: 'MinMaxSizeAlert' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
             var andObj = { key: 'And' };
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
-            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, ' + andObj['value'] + ' SVG</b></span>';
+            var size = void 0;
+            if (this.uploadSettings.minFileSize && this.uploadSettings.maxFileSize) {
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' </b> ' + andObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.maxFileSize) + ' </b> ';
+            }
+            else if (this.uploadSettings.minFileSize) {
+                fileSizeObj['key'] = 'MinSizeAlert';
+                this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' </b> ';
+            }
+            else if (this.uploadSettings.maxFileSize) {
+                fileSizeObj['key'] = 'MaxSizeAlert';
+                this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.maxFileSize) + ' </b> ';
+            }
+            if (fileTypeError) {
+                content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b>' + extension + '</b>' + '</span>';
+            }
+            else if (size) {
+                content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + size + '</span>';
+            }
         }
         var dialog = new Dialog({
             header: headerObj['value'],
             closeOnEscape: true,
             content: content,
             target: document.getElementById('target'),
-            width: '285px',
+            width: Browser.isDevice ? '285px' : '400px',
             isModal: true,
             animationSettings: { effect: 'Zoom' },
             close: this.dlgCloseBtnClick.bind(this),
@@ -22444,6 +22615,99 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         });
         dialog.appendTo('#' + this.element.id + '_dialog');
     };
+    /**
+     * Returns bytes in string format.
+     *
+     * @param { number } bytes - Specifies the bytes.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    ImageEditor.prototype.formatSizeUnits = function (bytes) {
+        var byte = '';
+        if (bytes >= 1073741824) {
+            byte = (bytes / 1073741824).toFixed(2) + ' GB';
+        }
+        else if (bytes >= 1048576) {
+            byte = (bytes / 1048576).toFixed(2) + ' MB';
+        }
+        else if (bytes >= 1024) {
+            byte = (bytes / 1024).toFixed(2) + ' KB';
+        }
+        else if (bytes > 1) {
+            byte = bytes + ' bytes';
+        }
+        else if (bytes === 1) {
+            byte = bytes + ' byte';
+        }
+        else {
+            byte = '0 bytes';
+        }
+        return byte;
+    };
+    /**
+     * Returns allowed file type extensions in string[].
+     *
+     * @hidden
+     * @returns {string[]}.
+     */
+    ImageEditor.prototype.getExtensionArray = function () {
+        var validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
+        var split = this.uploadSettings.allowedExtensions.split(',');
+        var extension = [];
+        for (var _i = 0, split_1 = split; _i < split_1.length; _i++) {
+            var ext = split_1[_i];
+            var trimmedExt = ext.trim();
+            for (var _a = 0, validExtensions_1 = validExtensions; _a < validExtensions_1.length; _a++) {
+                var valid = validExtensions_1[_a];
+                if (trimmedExt.indexOf(valid) !== -1) {
+                    extension.push(valid);
+                    break;
+                }
+            }
+        }
+        return extension;
+    };
+    /**
+     * Returns allowed file type extensions in string.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    ImageEditor.prototype.getExtensionString = function () {
+        var andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
+        var extension = this.getExtensionArray();
+        var words = '';
+        for (var i = 0; i < extension.length; i++) {
+            if (i === extension.length - 1 && extension.length > 1 &&
+                !((extension[i] === 'jpeg' || extension[i] === 'jpg') &&
+                    (words.indexOf('JPG') > -1))) {
+                words += ' ' + andObj['value'];
+            }
+            switch (extension[i]) {
+                case 'jpeg':
+                case 'jpg':
+                    if (words.indexOf('JPG') === -1) {
+                        words += ' JPG,';
+                    }
+                    break;
+                case 'png':
+                    words += ' PNG,';
+                    break;
+                case 'svg':
+                    words += ' SVG,';
+                    break;
+                case 'webp':
+                    words += ' WebP,';
+                    break;
+            }
+            if (i === extension.length - 1) {
+                words = words.slice(0, -1);
+            }
+        }
+        return words;
+    };
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -22518,10 +22782,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         var browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
-        var supportObj = { key: 'SupportText' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
-        var andObj = { key: 'And' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
         var dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         var dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
         var dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
@@ -22537,7 +22797,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
         var dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
-        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, ' + andObj['value'] + ' JPG';
+        this.updateDropInfoContent(dropInfoElement);
         var dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
         }));
@@ -24471,6 +24731,45 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }
         return items;
     };
+    /**
+     * Updates drop area content dynamically.
+     *
+     * @param { HTMLElement } dropInfoElement - Specifies the drop area element.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.updateDropInfoContent = function (dropInfoElement) {
+        if (!dropInfoElement) {
+            return;
+        }
+        var supportObj = { key: 'SupportText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var words = this.getExtensionString();
+        var fileSizeObj = { key: 'MinMaxSize' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+        var andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
+        var size;
+        if (this.uploadSettings.minFileSize && this.uploadSettings.maxFileSize) {
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' ' + andObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.maxFileSize);
+        }
+        else if (this.uploadSettings.minFileSize) {
+            fileSizeObj['key'] = 'MinSize';
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.minFileSize);
+        }
+        else if (this.uploadSettings.maxFileSize) {
+            fileSizeObj['key'] = 'MaxSize';
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.maxFileSize);
+        }
+        if (size) {
+            dropInfoElement.textContent = supportObj['value'] + words + size;
+        }
+        else {
+            dropInfoElement.textContent = supportObj['value'] + words;
+        }
+    };
     /**
      * Handles the OK button operation
      *
@@ -26126,7 +26425,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             Fluent2Dark: { primaryColor: '#115ea3', secondaryColor: '#fff' },
             Fluent2Highcontrast: { primaryColor: '#1aebff', secondaryColor: '#fff' },
             'Bootstrap5.3': { primaryColor: '#0d6efd', secondaryColor: '#fff' },
-            'Bootstrap5.3Dark': { primaryColor: '#0d6efd', secondaryColor: '#fff' }
+            'Bootstrap5.3Dark': { primaryColor: '#0d6efd', secondaryColor: '#fff' },
+            Tailwind3: { primaryColor: '#4f46e5', secondaryColor: '#ffffff' },
+            Tailwind3Dark: { primaryColor: '#6366f1', secondaryColor: '#ffffff03' }
         };
     };
     /**
@@ -26206,6 +26507,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Complex({}, FontFamily)
     ], ImageEditor.prototype, "fontFamily", void 0);
+    __decorate([
+        Complex({}, UploadSettings)
+    ], ImageEditor.prototype, "uploadSettings", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "beforeSave", void 0);
@@ -26297,6 +26601,8 @@ 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.
@@ -26387,6 +26693,10 @@ 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.
@@ -26731,6 +27041,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             ConfirmDialogContent: 'Do you want to save the changes you made to the image?',
             AlertDialogHeader: 'Unsupported file',
             AlertDialogContent: 'The selected file is unsupported.',
+            MinMaxSize: 'with file size between',
+            MinMaxSizeAlert: 'File size between',
+            MinSize: 'with minimum file size of',
+            MinSizeAlert: 'A minimum file size of',
+            MaxSize: 'with maximum file size of',
+            MaxSizeAlert: 'A maximum file size of',
+            To: 'to',
+            Bytes: 'bytes',
             Yes: 'Yes',
             No: 'No',
             ImageErrorDialogHeader: 'Image Selection Error',
@@ -26974,7 +27292,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 id: id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -26988,7 +27306,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     align: 'Left', type: 'Input',
                     tooltipText: this.l10n.getConstant('Browse'),
                     template: new Uploader({
-                        allowedExtensions: '.jpg, .jpeg, .png,.svg',
+                        allowedExtensions: parent.uploadSettings.allowedExtensions,
                         multiple: false,
                         selected: function () {
                             var toolbar = document.getElementById(id + '_toolbar');
@@ -27075,7 +27393,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var id = parent.element.id;
         if (parent.showQuickAccessToolbar) {
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -27173,11 +27491,11 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Open') > -1)) {
-                toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
             else if (Browser.isDevice && (parent.toolbar && parent.toolbar.indexOf('Open') === -1)) {
-                toolbarItems.push({ visible: false, id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
         }
@@ -27728,18 +28046,30 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
+        var parent = this.parent;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         var type = inputElement.files[0].type.split('/')[1];
-        var filesTypes = ['png', 'jpg', 'jpeg', 'svg', 'svg+xml'];
+        var filesTypes = this.parent.getExtensionArray();
+        var isJPG = ((type === 'jpg' || type === 'jpeg') &&
+            (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1));
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.fileName = inputElement.files[0].name.split('.')[0];
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var size = inputElement.files[0].size;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.parent.notify('toolbar', { prop: 'setInitialSize', value: { value: inputElement.files[0].size } });
-        if (filesTypes.indexOf(type) > -1) {
+        if ((filesTypes.indexOf(type) > -1 || isJPG || (type.indexOf('svg') > -1 && filesTypes.indexOf('svg') > -1)) &&
+            (!this.parent.uploadSettings.minFileSize || size > this.parent.uploadSettings.minFileSize) &&
+            (!this.parent.uploadSettings.maxFileSize || size < this.parent.uploadSettings.maxFileSize)) {
             this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
         }
         else {
-            this.parent.showDialogPopup();
+            if (!this.parent.isImageLoaded && !Browser.isDevice) {
+                this.destroyTopToolbar();
+                this.createToolbar();
+            }
+            this.parent.showDialogPopup('unsupported', !((filesTypes.indexOf(type) > -1 || isJPG || (type.indexOf('svg') > -1 && filesTypes.indexOf('svg') > -1))));
         }
     };
     ToolbarModule.prototype.triggerTbarClickEvent = function (args) {
@@ -28246,7 +28576,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var items = [
             { id: 'jpeg', text: 'JPEG' },
             { id: 'png', text: 'PNG' },
-            { id: 'svg', text: 'SVG' }
+            { id: 'svg', text: 'SVG' },
+            { id: 'webp', text: 'WebP' }
         ];
         var inputObj = new TextBox({
             placeholder: this.l10n.getConstant('ImageName')
@@ -28278,7 +28609,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var ddbElem = document.getElementById(id + '_saveDropdownbtn');
         if (ddbElem) {
             var spanElem_1 = document.createElement('span');
-            spanElem_1.innerHTML = this.fileType.toUpperCase();
+            spanElem_1.innerHTML = this.fileType === 'Webp' ? 'Webp' : this.fileType.toUpperCase();
             if (ddbElem) {
                 ddbElem.appendChild(spanElem_1);
             }
@@ -28442,8 +28773,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
-        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'png') {
+        else if (!isNullOrUndefined(fileType) && (fileType.toLowerCase() === 'png' || fileType.toLowerCase() === 'webp')) {
+            var type = 'image/' + fileType.toLowerCase();
             ctx.drawImage(tempCanvas, 0, 0);
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             tempCanvas.toBlob((function (blob) {
                 fileSize = Math.floor(blob.size / 1024);
                 if (fileSize > 1000) {
@@ -28459,7 +28792,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     canvas.style.display = 'none';
                 }
                 this.fileSize = fileSize;
-            }).bind(this), 'image/png', 1);
+            }).bind(this), type, 1);
         }
         else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
             ctx.drawImage(tempCanvas, 0, 0);
@@ -33101,5 +33434,5 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     return ToolbarModule;
 }());
 
-export { ArrowheadType, Crop, Direction, Draw, Export, FileType, Filter, FinetuneSettings, FontFamily, FrameLineStyle, FrameType, FreehandDrawing, ImageEditor, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, RedactType, Selection, SelectionSettings, Shape, ShapeType, Theme, ToolbarModule, Transform, UndoRedo, ZoomSettings, ZoomTrigger };
+export { ArrowheadType, Crop, Direction, Draw, Export, FileType, Filter, FinetuneSettings, FontFamily, FrameLineStyle, FrameType, FreehandDrawing, ImageEditor, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, RedactType, Selection, SelectionSettings, Shape, ShapeType, Theme, ToolbarModule, Transform, UndoRedo, UploadSettings, ZoomSettings, ZoomTrigger };
 //# sourceMappingURL=ej2-image-editor.es5.js.map