Clear file inputs after jobs (#2248)

src/main/resources/messages_en_GB.properties

@@ -81,6 +81,7 @@ page=Page
 pages=Pages
 loading=Loading...
 addToDoc=Add to Document
+reset=Reset
 
 legal.privacy=Privacy Policy
 legal.terms=Terms and Conditions

src/main/resources/static/js/downloader.js

@@ -64,6 +64,8 @@
             await handleSingleDownload(url, formData);
           }
         }
+
+        clearFileInput();
         clearTimeout(timeoutId);
         $("#submitBtn").text(originalButtonText);
 
@@ -85,6 +87,7 @@
         }
 
       } catch (error) {
+        clearFileInput();
         clearTimeout(timeoutId);
         handleDownloadError(error);
         $("#submitBtn").text(originalButtonText);
@@ -116,11 +119,15 @@
 
       const blob = await response.blob();
       if (contentType.includes("application/pdf") || contentType.includes("image/")) {
+        clearFileInput();
         return handleResponse(blob, filename, !isMulti, isZip);
       } else {
+        clearFileInput();
         return handleResponse(blob, filename, false, isZip);
       }
+
     } catch (error) {
+      clearFileInput();
       console.error("Error in handleSingleDownload:", error);
       throw error;
     }
@@ -291,4 +298,27 @@
     }
   });
 
+  // Clear file input after job
+  function clearFileInput(){
+    let pathname = document.location.pathname;
+    if(pathname != "/merge-pdfs"){
+      let formElement = document.querySelector("#fileInput-input");
+      formElement.value = '';
+      let editSectionElement = document.querySelector("#editSection");
+      if(editSectionElement){
+        editSectionElement.style.display = "none";
+      }
+      let cropPdfCanvas = document.querySelector("#crop-pdf-canvas");
+      let overlayCanvas = document.querySelector("#overlayCanvas");
+      if(cropPdfCanvas && overlayCanvas){
+        cropPdfCanvas.width = 0;
+        cropPdfCanvas.heigth = 0;
+
+        overlayCanvas.width = 0;
+        overlayCanvas.heigth = 0;
+      }
+    } else{
+      console.log("Disabled for 'Merge'");
+    }
+  }
 })();

src/main/resources/static/js/merge.js

@@ -173,3 +173,18 @@ function updateFiles() {
   }
   document.getElementById("fileInput-input").files = dataTransfer.files;
 }
+
+document.querySelector("#resetFileInputBtn").addEventListener("click", ()=>{
+  let formElement = document.querySelector("#fileInput-input");
+    formElement.value = '';
+    clearLiElements();
+    updateFiles();
+
+});
+
+function clearLiElements(){
+  let listGroupItemNodeList = document.querySelectorAll(".list-group-item");
+  for (let i = 0; i < listGroupItemNodeList.length; i++) {
+    listGroupItemNodeList[i].remove();
+    };
+  }

src/main/resources/static/js/multitool/PdfContainer.js

@@ -28,6 +28,7 @@ class PdfContainer {
     this.toggleSelectPageVisibility = this.toggleSelectPageVisibility.bind(this);
     this.updatePagesFromCSV = this.updatePagesFromCSV.bind(this);
     this.addFilesBlankAll = this.addFilesBlankAll.bind(this)
+    this.removeAllElements = this.removeAllElements.bind(this);
 
     this.pdfAdapters = pdfAdapters;
 
@@ -53,6 +54,7 @@ class PdfContainer {
     window.updateSelectedPagesDisplay = this.updateSelectedPagesDisplay;
     window.updatePageNumbersAndCheckboxes = this.updatePageNumbersAndCheckboxes;
     window.addFilesBlankAll = this.addFilesBlankAll
+    window.removeAllElements = this.removeAllElements;
 
     const filenameInput = document.getElementById("filename-input");
     const downloadBtn = document.getElementById("export-button");
@@ -294,6 +296,16 @@ class PdfContainer {
     }
   }
 
+  removeAllElements(){
+    let pageContainerNodeList = document.querySelectorAll(".page-container");
+    for (var i = 0; i < pageContainerNodeList.length; i++) {
+      pageContainerNodeList[i].remove();
+    }
+    document.querySelectorAll(".enable-on-file").forEach((element) => {
+      element.disabled = true;
+    });
+  }
+
   deleteSelected() {
     window.selectedPages.sort((a, b) => a - b);
     let deletions = 0;

src/main/resources/templates/merge-pdfs.html

@@ -40,6 +40,9 @@
                 <button type="button" id="sortByDateBtn" class="btn btn-info" th:text="#{merge.sortByDate}"></button>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
               </div>
+              <div class="mb-3">
+                <button type="button" id="resetFileInputBtn" class="btn btn-danger" th:text="#{reset}">Reset</button>
+              </div>
             </form>
             <span id="pageTranslation" th:text="#{page}" style="display:none;"></span>
             <span id="pagesTranslation" th:text="#{pages}" style="display:none;"></span>

src/main/resources/templates/multi-tool.html

@@ -83,6 +83,9 @@
                     </span>
                   </button>
                 </div>
+                <div class="mb-3">
+                  <button type="button" id="resetFileInputBtn" class="btn btn-danger" onclick="removeAllElements()" th:text="#{reset}">Reset</button>
+                </div>
                 <div id="selected-pages-display" class="selected-pages-container hidden">
                   <div style="display:flex; height:3rem; margin-right:1rem">
                     <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected

src/main/resources/templates/rotate-pdf.html

@@ -68,7 +68,7 @@
     fileInput.addEventListener("change", async function () {
       console.log("loading pdf");
 
-      document.querySelector("#editSection").style.display = "";
+      document.querySelector("#editSection").style.display = "block";
 
       const existingPreview = document.getElementById("pdf-preview");
       if (existingPreview) {