extensions/static/extensions/scripts/manage.js

@@ -13,6 +13,7 @@ function appendImageUploadForm() {
     <input type="file" name="${formsetPrefix}-${i}-source"
       accept="image/*" class="form-control"
       id="id_${formsetPrefix}-${i}-source">
+    <button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
     <div class="invalid-feedback"></div>
   </div>
   <div class="col">
@@ -31,9 +32,35 @@ function appendImageUploadForm() {
 btnAddImage.addEventListener('click', function(ev) {
   ev.preventDefault();
   appendImageUploadForm();
+
+  // Call function resetImgUploadForm
+  resetImgUploadForm();
+
   return false;
 });
 
+// Create function resetImgUploadForm
+function resetImgUploadForm() {
+  const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');
+
+  btnResetImgUploadForm.forEach(function(item) {
+    item.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      // Find the associated image input (assuming it's a sibling)
+      const inputImg = item.previousElementSibling;
+
+      // Reset the selected image (if any)
+      inputImg.value = ''; // Clear the input value
+    });
+  });
+}
+
+// Create function init
+function init() {
+  resetImgUploadForm();
+}
+
 // Configure tag selection, if present on the page
 if (tagInput) {
   const taggerOptions = {
@@ -51,3 +78,5 @@ if (tagInput) {
   tagger(tagInput, taggerOptions);
   // FIXME: changes to the tags input don't trigger form change
 };
+
+init();

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

@@ -9,6 +9,7 @@
       <div class="row">
         <div class="col">
           {% include "common/components/field.html" with field=inlineform.source label='File' %}
+          <button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
         </div>
         <div class="col">
           {% include "common/components/field.html" with field=inlineform.caption label='Caption' %}