Add option to insert blank page between pages in Multi-tool (#2194) (#2201)

src/main/resources/static/css/pdfActions.css

@@ -126,3 +126,12 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
   aspect-ratio: 1;
   border-radius: 100px;
 }
+
+.pdf-actions_insert-file-blank-button {
+  position: absolute;
+  top: 75%;
+  right: 50%;
+  translate: 0% -50%;
+  aspect-ratio: 1;
+  border-radius: 100px;
+}

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

@@ -73,6 +73,11 @@ class PdfActionsManager {
     this.addFiles(imgContainer);
   }
 
+  insertFileBlankButtonCallback(e) {
+    var imgContainer = this.getPageContainer(e.target);
+    this.addFiles(imgContainer, true);
+  }
+
   splitFileButtonCallback(e) {
     var imgContainer = this.getPageContainer(e.target);
     imgContainer.classList.toggle("split-before");
@@ -89,6 +94,7 @@ class PdfActionsManager {
     this.rotateCWButtonCallback = this.rotateCWButtonCallback.bind(this);
     this.deletePageButtonCallback = this.deletePageButtonCallback.bind(this);
     this.insertFileButtonCallback = this.insertFileButtonCallback.bind(this);
+    this.insertFileBlankButtonCallback = this.insertFileBlankButtonCallback.bind(this);
     this.splitFileButtonCallback = this.splitFileButtonCallback.bind(this);
   }
 
@@ -152,6 +158,12 @@ class PdfActionsManager {
     splitFileButton.onclick = this.splitFileButtonCallback;
     insertFileButtonContainer.appendChild(splitFileButton);
 
+    const insertFileBlankButton = document.createElement("button");
+    insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button");
+    insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span>`;
+    insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
+    insertFileButtonContainer.appendChild(insertFileBlankButton);
+
     div.appendChild(insertFileButtonContainer);
 
     // add this button to every element, but only show it on the last one :D

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

@@ -22,6 +22,7 @@ class PdfContainer {
     this.nameAndArchiveFiles = this.nameAndArchiveFiles.bind(this);
     this.splitPDF = this.splitPDF.bind(this);
     this.splitAll = this.splitAll.bind(this);
+    this.addFilesBlankAll = this.addFilesBlankAll.bind(this)
 
     this.pdfAdapters = pdfAdapters;
 
@@ -38,6 +39,7 @@ class PdfContainer {
     window.exportPdf = this.exportPdf;
     window.rotateAll = this.rotateAll;
     window.splitAll = this.splitAll;
+    window.addFilesBlankAll = this.addFilesBlankAll
 
     const filenameInput = document.getElementById("filename-input");
     const downloadBtn = document.getElementById("export-button");
@@ -77,19 +79,25 @@ class PdfContainer {
     }
   }
 
-  addFiles(nextSiblingElement) {
+  addFiles(nextSiblingElement, blank = false) {
-    var input = document.createElement("input");
+    if (blank) {
-    input.type = "file";
-    input.multiple = true;
-    input.setAttribute("accept", "application/pdf,image/*");
-    input.onchange = async (e) => {
-      const files = e.target.files;
 
-      this.addFilesFromFiles(files, nextSiblingElement);
+      this.addFilesBlank(nextSiblingElement);
-      this.updateFilename(files ? files[0].name : "");
-    };
 
-    input.click();
+    } else {
+      var input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.setAttribute("accept", "application/pdf,image/*");
+      input.onchange = async (e) => {
+        const files = e.target.files;
+
+        this.addFilesFromFiles(files, nextSiblingElement);
+        this.updateFilename(files ? files[0].name : "");
+      };
+
+      input.click();
+    }
   }
 
   async addFilesFromFiles(files, nextSiblingElement) {
@@ -108,6 +116,47 @@ class PdfContainer {
     });
   }
 
+  async addFilesBlank(nextSiblingElement) {
+    const pdfContent = `
+      %PDF-1.4
+      1 0 obj
+      << /Type /Catalog /Pages 2 0 R >>
+      endobj
+      2 0 obj
+      << /Type /Pages /Kids [3 0 R] /Count 1 >>
+      endobj
+      3 0 obj
+      << /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842] /Contents 5 0 R >>
+      endobj
+      5 0 obj
+      << /Length 44 >>
+      stream
+      0 0 0 595 0 842 re
+      W
+      n
+      endstream
+      endobj
+      xref
+      0 6
+      0000000000 65535 f
+      0000000010 00000 n
+      0000000071 00000 n
+      0000000121 00000 n
+      0000000205 00000 n
+      0000000400 00000 n
+      trailer
+      << /Size 6 /Root 1 0 R >>
+      startxref
+      278
+      %%EOF
+    `;
+    const blob = new Blob([pdfContent], { type: 'application/pdf' });
+    const url = URL.createObjectURL(blob);
+    const file = new File([blob], "blank_page.pdf", { type: "application/pdf" });
+    await this.addPdfFile(file, nextSiblingElement);
+  }
+
+
   rotateElement(element, deg) {
     var lastTransform = element.style.rotate;
     if (!lastTransform) {
@@ -224,6 +273,17 @@ class PdfContainer {
     }
   }
 
+
+  addFilesBlankAll() {
+    const allPages = this.pagesContainer.querySelectorAll(".page-container");
+    allPages.forEach((page, index) => {
+      if (index !== 0) {
+        this.addFiles(page, true)
+      }
+    });
+  }
+
+
   splitAll() {
     const allPages = this.pagesContainer.querySelectorAll(".page-container");
     if (this.pagesContainer.querySelectorAll(".split-before").length > 0) {
@@ -450,7 +510,7 @@ function detectImageType(uint8Array) {
 
   // Check for TIFF signature (little-endian and big-endian)
   if ((uint8Array[0] === 73 && uint8Array[1] === 73 && uint8Array[2] === 42 && uint8Array[3] === 0) ||
-      (uint8Array[0] === 77 && uint8Array[1] === 77 && uint8Array[2] === 0 && uint8Array[3] === 42)) {
+    (uint8Array[0] === 77 && uint8Array[1] === 77 && uint8Array[2] === 0 && uint8Array[3] === 42)) {
     return 'TIFF';
   }
 

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

@@ -47,6 +47,11 @@
                       cut
                     </span>
                   </button>
+                  <button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
+                    <span class="material-symbols-rounded">
+                      insert_page_break
+                    </span>
+                  </button>
                   <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
                     <span class="material-symbols-rounded">
                       download