PS-73 [FIX] Ensures the image is not uploaded and displays an error if it exceeds the maximum size. (#702)

Author: armine-fliplet

js/build.templates.js

@@ -51,6 +51,10 @@ Fliplet.FormBuilder.field('image', {
     },
     description: {
       type: String
+    },
+    isImageSizeExceeded: {
+      type: Boolean,
+      default: false
     }
   },
   data: {
@@ -228,7 +232,14 @@ Fliplet.FormBuilder.field('image', {
             return;
           }
 
+          if (img.width > $vm.customWidth || img.height > $vm.customHeight) {
+            $vm.isImageSizeExceeded = true;
+
+            return;
+          }
+
           $vm.hasCorruptedImage = false;
+          $vm.isImageSizeExceeded = false;
 
           var scaledImage = loadImage.scale(img, options);
           var imgBase64Url = scaledImage.toDataURL(mimeType, $vm.jpegQuality);

js/components/image.js

@@ -29,6 +29,7 @@
     />
   </label>
   <p class="text-danger" v-if="hasCorruptedImage">{{T "widgets.form.image.invalid"}}</p>
+  <p class="text-danger" v-if="isImageSizeExceeded">\{{$t("widgets.form.image.imageSizeExceeded", { maxImageSize: customWidth + 'x' + customHeight })}}</p>
   <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">{{T
       "widgets.form.errors.required"
     }}</p>

templates/components/image.build.hbs

@@ -25,7 +25,8 @@
         },
         "confirmMessage": "How do you want to choose your image?",
         "confirmLabel": "Choose Image",
-        "required": "Please fill in required fields."
+        "required": "Please fill in required fields.",
+        "imageSizeExceeded": "Image dimensions are too large. Please upload an image {{maxImageSize}}px or smaller."
       },
       "interface": {
         "hidden": "Hidden"