@syncfusion/ej2-image-editor 27.2.5 → 28.1.39

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

@@ -25,6 +25,26 @@ import { Complex, Browser, ChildProperty, compile as templateCompiler, compile }
 import { ToolbarModule, Crop, Draw, Filter, FreehandDrawing, Selection, Shape, Transform, UndoRedo, Export, FrameLineStyle, ShapeType } from './../index';
 import { ZoomTrigger, ImageFinetuneOption } from './../index';
 import { Uploader } from '@syncfusion/ej2-inputs';
+/**
+ * Defines the settings for restricting uploaded images.
+ */
+var UploadSettings = /** @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));
+export { UploadSettings };
 /**
  * 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.
  */
@@ -503,6 +523,24 @@ var ImageEditor = /** @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;
             }
         }
     };
@@ -537,6 +575,12 @@ var ImageEditor = /** @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.setProperties({ uploadSettings: { allowedExtensions: '.jpg, .jpeg, .png, .svg, .webp' } }, true);
+        }
+        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';
@@ -586,17 +630,28 @@ var ImageEditor = /** @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 {
@@ -604,7 +659,7 @@ var ImageEditor = /** @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);
                     }
                 }
             }
@@ -618,10 +673,11 @@ var ImageEditor = /** @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;
@@ -641,16 +697,38 @@ var ImageEditor = /** @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),
@@ -662,6 +740,99 @@ var ImageEditor = /** @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)
@@ -736,10 +907,6 @@ var ImageEditor = /** @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;' } });
@@ -755,7 +922,7 @@ var ImageEditor = /** @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'
         }));
@@ -2689,6 +2856,45 @@ var ImageEditor = /** @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
      *
@@ -4344,7 +4550,9 @@ var ImageEditor = /** @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' }
         };
     };
     /**
@@ -4424,6 +4632,9 @@ var ImageEditor = /** @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);

package/src/image-editor/renderer/toolbar.js

@@ -173,6 +173,14 @@ var ToolbarModule = /** @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',
@@ -416,7 +424,7 @@ var ToolbarModule = /** @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 = [];
             }
@@ -430,7 +438,7 @@ var ToolbarModule = /** @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');
@@ -517,7 +525,7 @@ var ToolbarModule = /** @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 = [];
             }
@@ -615,11 +623,11 @@ var ToolbarModule = /** @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' });
             }
         }
@@ -1170,18 +1178,33 @@ var ToolbarModule = /** @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) {
+                this.destroyTopToolbar();
+                this.createToolbar();
+                if (Browser.isDevice) {
+                    this.destroyBottomToolbar();
+                }
+            }
+            this.parent.showDialogPopup('unsupported', !((filesTypes.indexOf(type) > -1 || isJPG || (type.indexOf('svg') > -1 && filesTypes.indexOf('svg') > -1))));
         }
     };
     ToolbarModule.prototype.triggerTbarClickEvent = function (args) {
@@ -1688,7 +1711,8 @@ var ToolbarModule = /** @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')
@@ -1720,7 +1744,7 @@ var ToolbarModule = /** @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);
             }
@@ -1884,8 +1908,10 @@ var ToolbarModule = /** @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) {
@@ -1901,7 +1927,7 @@ var ToolbarModule = /** @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);