Merge pull request #6392 from OCHA-DAP/fix/HDX-9946-Limit_images_caro…

…usel

HDX-9946 - Limit or auto optimize images that go on the carousel

ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.js

@@ -80,11 +80,40 @@
 
             return this;
         },
-        onFieldEdit: function(e) {
+        _getImageWidth: async function(file) {
+            let promise = new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.onload = function() {
+                        resolve(img.width);
+                    };
+                    img.onerror = function() {
+                        reject('Failed to load the image.');
+                    };
+                    img.src = e.target.result;
+                };
+                reader.onerror = function() {
+                    reject('Failed to read the file.');
+                };
+                reader.readAsDataURL(file);
+            });
+            let width = await promise;
+            return width;
+        },
+        onFieldEdit: async function(e) {
             var value = e.target.value;
             if (e.target.type === "file"){
                 value = e.target.files[0];
-                this.model.set('graphic_upload_preview', URL.createObjectURL(value));
+                width = await this._getImageWidth(value);
+                const urlParams = new URLSearchParams(window.location.search);
+                const overrideImageContraints = urlParams.get('overrideImage');
+                if ((overrideImageContraints != "true") && (value.size > 50000 || width != 550)) {
+                    alert("Please keep files under 50KB and width at 550px!");
+                    value = null; 
+                } else {
+                    this.model.set('graphic_upload_preview', URL.createObjectURL(value));
+                }
             }
             this.model.set(e.target.name, value);
             this.render();