From 80689deffd80509f2c040a1452068448d3e2c523 Mon Sep 17 00:00:00 2001
From: Alexandru Artimon <aalecs@gmail.com>
Date: Mon, 15 Jul 2024 18:39:38 +0000
Subject: [PATCH] HDX-9946 - Limit or auto optimize images that go on the
 carousel

---
 .../hdx_theme/fanstatic/admin/carousel.js     | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.js
index fe18a09512..247af25ceb 100644
--- a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/admin/carousel.js
+++ b/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 && width != 275))) {
+                    alert("Please keep files under 50KB and width at either 275px or 550px!");
+                    value = null; 
+                } else {
+                    this.model.set('graphic_upload_preview', URL.createObjectURL(value));
+                }
             }
             this.model.set(e.target.name, value);
             this.render();