common/static/common/styles/_extension.sass

@@ -321,6 +321,7 @@
     width: var(--preview-thumbnail-max-size)
 
     .previews-list-item-thumbnail-img
+      background-color: var(--background-color)
       background-position: center
       background-size: cover
       border-radius: var(--border-radius)
@@ -350,6 +351,11 @@
       pointer-events: none
       user-select: none
 
+  .form-control
+    &[type="file"]
+      font-size: var(--font-size-extra-small)
+      max-width: 50%
+
 .ext-version-history
   summary
     display: flex

extensions/static/extensions/scripts/manage.js

@@ -9,22 +9,30 @@ function appendImageUploadForm() {
   const i = inputTotalForms.value;
   const formRow = document.createElement('div');
   const newFormHTML = `
-  <div class="col">
+  <div class="previews-list-item">
-    <input type="file" name="${formsetPrefix}-${i}-source"
+    <div class="previews-list-item-thumbnail pl-3">
-      accept="image/*" class="form-control"
+      <div class="mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
-      id="id_${formsetPrefix}-${i}-source">
+    </div>
-    <button class="btn btn-link js-btn-reset-img-upload-form mt-1 pl-0 pr-2"><i class="i-refresh"></i> Reset</button>
+    <div class="details flex-grow-1">
-    <button class="btn btn-link js-btn-remove-img-upload-form mt-1 px-2"><i class="i-trash"></i> Remove</button>
+      <div class="mb-2">
-    <div class="invalid-feedback"></div>
+        <label for="${formsetPrefix}-${i}-caption">Caption</label>
+        <input class="form-control" id="${formsetPrefix}-${i}-caption" type="text" maxlength="255" name="${formsetPrefix}-${i}-caption" placeholder="Describe the preview">
+      </div>
+      <div class="d-flex justify-content-between">
+        <input accept="image/*" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
+        <ul class="pt-0">
+          <li>
+            <button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
+          </li>
+          <li>
+            <button class="btn btn-link btn-sm js-btn-remove-img-upload-form pl-2 pr-0"><i class="i-trash"></i> Delete</button>
+          </li>
+        </ul>
+      </div>
     </div>
-  <div class="col">
-    <input type="text" name="${formsetPrefix}-${i}-caption"
-      maxlength="255" placeholder="Describe the preview"
-      class="form-control" id="id_${formsetPrefix}-${i}-caption">
-    <div class="invalid-feedback"></div>
   </div>
   `;
-  formRow.classList.add('row', 'ext-edit-field-row', 'js-ext-edit-field-row');
+  formRow.classList.add('ext-edit-field-row', 'js-ext-edit-field-row');
   formRow.innerHTML = newFormHTML;
   formsetContainer.appendChild(formRow);
   inputTotalForms.value = parseInt(inputTotalForms.value) + 1;
@@ -68,8 +76,11 @@ function resetImgUploadForm() {
     item.addEventListener('click', function(e) {
       e.preventDefault();
 
-      // Find the associated image input (assuming it's a sibling)
+      // Find the row parent
-      const inputImg = item.previousElementSibling;
+      const rowParent = this.closest('.js-ext-edit-field-row');
+
+      // Find the input image
+      const inputImg = rowParent.querySelector('.js-input-img');
 
       // Reset the selected image (if any)
       inputImg.value = ''; // Clear the input value

extensions/templates/extensions/manage/components/add_previews.html

@@ -1,7 +1,8 @@
 {% load common %}
 {# Upload new preview images #}
 {% load i18n %}
-<div id="add-image-container">
+<div class="previews-upload">
+  <div id="add-image-container" class="previews-list">
     {{ add_preview_formset.management_form }}
     {{ add_preview_formset.non_form_errors }}
     {% for newform in add_preview_formset %}
@@ -19,6 +20,7 @@
       {% endwith %}
     {% endfor %}
   </div>
+</div>
 <div class="row">
   <div class="col text-right mt-3">
     <a id="btn-add-image" class="btn">