extensions/static/extensions/scripts/manage.js

@@ -1,3 +1,5 @@
+// TODO: improve and refactor variable namings
+
 const formsetContainer = document.getElementById('add-image-container');
 const form = document.getElementById('update-extension-form');
 const btnAddImage = document.getElementById('btn-add-image');
@@ -11,7 +13,7 @@ function appendImageUploadForm() {
   const newFormHTML = `
   <div class="previews-list-item">
     <div class="previews-list-item-thumbnail pl-3">
-      <div class="mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
+      <div class="js-input-img-thumbnail mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
     </div>
     <div class="details flex-grow-1">
       <div class="mb-2">
@@ -48,6 +50,9 @@ btnAddImage.addEventListener('click', function(ev) {
   // Init function resetImgUploadForm
   resetImgUploadForm();
 
+  // Init function setImgUploadFormThumbnail
+  setImgUploadFormThumbnail();
+
   return false;
 });
 
@@ -82,8 +87,37 @@ function resetImgUploadForm() {
       // Find the input image
       const inputImg = rowParent.querySelector('.js-input-img');
 
+      // Find the input image thumbnail
+      const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
+
       // Reset the selected image (if any)
       inputImg.value = ''; // Clear the input value
+
+      // Reset the selected image thumbnail
+      inputImgThumbnail.removeAttribute('style');
+    });
+  });
+}
+
+// Create function setImgUploadFormThumbnail
+function setImgUploadFormThumbnail() {
+  const inputImg = document.querySelectorAll('.js-input-img');
+
+  inputImg.forEach(function(item) {
+    item.addEventListener('change', function(e) {
+      // Init file image
+      const file = event.target.files[0];
+
+      // Find the row parent
+      const rowParent = this.closest('.js-ext-edit-field-row');
+
+      // Find the thumbnail image
+      const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
+
+      // Set thumbnail img
+      if (file) {
+        inputImgThumbnail.style.backgroundImage = `url('${URL.createObjectURL(file)}')`;
+      }
     });
   });
 }