Merge pull request #1768 from ornskoldsvikskommun/fix-image-in-relate…

…d-table Fix: Image in related table
origo-map · Jun 21, 2023 · 6891f76 · 6891f76
2 parents 59c42e3 + 321267d
commit 6891f76
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 36 deletions.
diff --git a/src/controls/editor/editform.js b/src/controls/editor/editform.js
@@ -78,7 +78,7 @@ const createForm = function createForm(obj) {
       const imageClass = val ? '' : 'o-hidden';
       el = `<div class="validate ${cls}"><label>${label}<br>`;
       el += `<img src="${val}" id="image-upload" class="${imageClass}"/>`;
-      el += `<input type="file" name="bildfil" id="${id}" value="${val}" accept="image/*"${disabled}></label>`;
+      el += `<input type="file" name="bildfil" id="${id}" accept="image/*"${disabled}></label>`;
       el += `<input id="o-delete-image-button" class="${imageClass}" type="button" aria-label="Ta bort bild" value="Ta bort bild"${disabled}>`;
       el += '</div>';
       break;

diff --git a/src/controls/editor/edithandler.js b/src/controls/editor/edithandler.js
@@ -840,7 +840,6 @@ function onAttributesSave(features, attrs) {
   document.getElementById(`o-save-button-${currentLayer}`).addEventListener('click', (e) => {
     const editEl = {};
     const valid = {};
-    const fileReaders = [];
     attrs.forEach((attribute) => {
       // Get the input container class
       const containerClass = `.${attribute.elId}`;
@@ -868,33 +867,13 @@ function onAttributesSave(features, attrs) {
           // No other validation is performed on searchList as the only thing that can be checked now is that value is in list
           // and that is handled inside the searchList itself.
           editEl[attribute.name] = attribute.searchList.getValue();
+        } else if (attribute.type === 'image') {
+          // File input's value is the filename, but the image itself is stored in the model
+          editEl[attribute.name] = attribute.val;
         } else { // Read value from input text, textarea or select
           editEl[attribute.name] = inputValue;
         }
       }
-      // Check if file. If file, read and trigger resize
-      if (inputType === 'file') {
-        const input = document.getElementById(attribute.elId);
-        const file = input.files[0];
-
-        if (file) {
-          const fileReader = new FileReader();
-          fileReader.onload = () => {
-            getImageOrientation(file, (orientation) => {
-              imageresizer(fileReader.result, attribute, orientation, (resized) => {
-                editEl[attribute.name] = resized;
-                const imageresized = new CustomEvent('imageresized');
-                document.dispatchEvent(imageresized);
-              });
-            });
-          };
-
-          fileReader.readAsDataURL(file);
-          fileReaders.push(fileReader);
-        } else {
-          editEl[attribute.name] = document.getElementById(attribute.elId).getAttribute('value');
-        }
-      }
 
       // Validate form input
       const errorOn = document.querySelector(`[id="${inputId}"]`);
@@ -1037,13 +1016,7 @@ function onAttributesSave(features, attrs) {
 
     // If valid, continue
     if (valid.validates) {
-      if (fileReaders.length > 0 && fileReaders.every(reader => reader.readyState === 1)) {
-        document.addEventListener('imageresized', () => {
-          attributesSaveHandler(features, editEl);
-        });
-      } else {
-        attributesSaveHandler(features, editEl);
-      }
+      attributesSaveHandler(features, editEl);
 
       document.getElementById(`o-save-button-${currentLayer}`).blur();
       modal.closeModal();
@@ -1076,6 +1049,9 @@ function addListener() {
   return fn;
 }
 
+/**
+ * Returns a function that adds an event handler to read an image file when user selects a file.
+ * */
 function addImageListener() {
   const fn = (obj) => {
     const fileReader = new FileReader();
@@ -1084,16 +1060,30 @@ function addImageListener() {
       if (ev.target.files && ev.target.files[0]) {
         document.querySelector(`${containerClass} img`).classList.remove('o-hidden');
         document.querySelector(`${containerClass} input[type=button]`).classList.remove('o-hidden');
-        fileReader.onload = (e) => {
-          document.querySelector(`${containerClass} img`).setAttribute('src', e.target.result);
+        fileReader.onload = () => {
+          // When the file has been read, rotate it and resize to configured max size or default max
+          // Don't know why it's rotated. Probably something to do with iphones that store images upside down.
+          getImageOrientation(ev.target.files[0], (orientation) => {
+            imageresizer(fileReader.result, obj, orientation, (resized) => {
+              // Display the image in the form
+              document.querySelector(`${containerClass} img`).setAttribute('src', resized);
+              // Store the image data in the model so it can be retreived when saving without having to read the file again
+              // or pick it up from the img tag
+              // eslint-disable-next-line no-param-reassign
+              obj.val = resized;
+            });
+          });
         };
         fileReader.readAsDataURL(ev.target.files[0]);
       }
     });
-
+    // Find the remove button and attach event handler.
     document.querySelector(`${containerClass} input[type=button]`).addEventListener('click', (e) => {
-      document.getElementById(obj.elId).setAttribute('value', '');
+      // Clear the filename
       document.getElementById(obj.elId).value = '';
+      // Also clear the model value
+      // eslint-disable-next-line no-param-reassign
+      obj.val = '';
       document.querySelector(`${containerClass} img`).classList.add('o-hidden');
       e.target.classList.add('o-hidden');
     });