[IMP] web_editor: show error if uploaded image type is not suported

We only support .gif, .jpe, .jpeg, .jpg, .png, .svg

This commit won't let the code go though if we know the image format is not
suported.

Part of https://github.com/odoo/odoo/pull/65828
task-2345082

addons/web_editor/controllers/main.py

@@ -18,7 +18,7 @@ from odoo.exceptions import UserError
 from odoo.modules.module import get_module_path, get_resource_path
 from odoo.tools.misc import file_open
 
-from ..models.ir_attachment import SUPPORTED_IMAGE_MIMETYPES
+from ..models.ir_attachment import SUPPORTED_IMAGE_EXTENSIONS, SUPPORTED_IMAGE_MIMETYPES
 
 logger = logging.getLogger(__name__)
 DEFAULT_LIBRARY_ENDPOINT = 'https://media-api.odoo.com'
@@ -163,11 +163,19 @@ class Web_Editor(http.Controller):
         return True
 
     @http.route('/web_editor/attachment/add_data', type='json', auth='user', methods=['POST'], website=True)
-    def add_data(self, name, data, quality=0, width=0, height=0, res_id=False, res_model='ir.ui.view', **kwargs):
-        try:
-            data = tools.image_process(data, size=(width, height), quality=quality, verify_resolution=True)
-        except UserError:
-            pass  # not an image
+    def add_data(self, name, data, is_image, quality=0, width=0, height=0, res_id=False, res_model='ir.ui.view', **kwargs):
+        if is_image:
+            format_error_msg = _("Uploaded image's format is not supported. Try with: %s", ', '.join(SUPPORTED_IMAGE_EXTENSIONS))
+            try:
+                data = tools.image_process(data, size=(width, height), quality=quality, verify_resolution=True)
+                img_extension = tools.base64_to_image(data).format.lower()
+                if img_extension not in [ext.replace('.', '') for ext in SUPPORTED_IMAGE_EXTENSIONS]:
+                    return {'error': format_error_msg}
+            except UserError:
+                # considered as an image by the brower file input, but not
+                # recognized as such by PIL, eg .webp
+                return {'error': format_error_msg}
+
         self._clean_context()
         attachment = self._attachment_create(name=name, data=data, res_id=res_id, res_model=res_model)
         return attachment._get_media_info()

addons/web_editor/models/ir_attachment.py

@@ -5,7 +5,9 @@ from werkzeug.urls import url_quote
 
 from odoo import api, models, fields, tools
 
-SUPPORTED_IMAGE_MIMETYPES = ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/svg+xml']
+SUPPORTED_IMAGE_MIMETYPES = ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml']
+SUPPORTED_IMAGE_EXTENSIONS = ['.gif', '.jpe', '.jpeg', '.jpg', '.png', '.svg']
+
 
 class IrAttachment(models.Model):
 

addons/web_editor/static/src/js/wysiwyg/widgets/media.js

@@ -583,6 +583,7 @@ var FileWidget = SearchableMediaWidget.extend({
                             'data': result.split(',')[1],
                             'res_id': this.options.res_id,
                             'res_model': this.options.res_model,
+                            'is_image': this.widgetType === 'image',
                             'width': 0,
                             'quality': 0,
                         }
@@ -779,7 +780,13 @@ var FileWidget = SearchableMediaWidget.extend({
             },
         }).then(attachment => {
             $progressBar.find('.fa-spinner, .progress').addClass('d-none');
-            $progressBar.find('.js_progressbar_txt .text-success').removeClass('d-none');
+            if (attachment.error) {
+                this.hasError = true;
+                $progressBar.find('.js_progressbar_txt .text-danger').removeClass('d-none');
+                $progressBar.find('.js_progressbar_txt .text-danger .o_we_error_text').text(attachment.error);
+            } else {
+                $progressBar.find('.js_progressbar_txt .text-success').removeClass('d-none');
+            }
             return attachment;
         }).guardedCatch(() => {
             this.hasError = true;
@@ -806,6 +813,7 @@ var ImageWidget = FileWidget.extend({
      */
     init: function (parent, media, options) {
         this.searchService = 'all';
+        this.widgetType = 'image';
         options = _.extend({
             accept: 'image/*',
             mimetypeDomain: [['mimetype', 'in', this.IMAGE_MIMETYPES]],

addons/web_editor/static/src/xml/wysiwyg.xml

@@ -289,7 +289,7 @@
             </div>
             <div class='js_progressbar_txt'>
                 <span class="text-success d-none"><i class='fa fa-check'/> File has been uploaded</span>
-                <span class="text-danger d-none"><i class='fa fa-times'/> File could not be saved</span>
+                <span class="text-danger d-none"><i class='fa fa-times float-left m-1'/> <span class="o_we_error_text">File could not be saved</span></span>
             </div>
             <div class="progress">
                 <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>