Feat: Reverse-pages for mulit-pdf

- Added new state pdfDocs: [ ]
- Made tweaks for new state in fileHandler.ts

src/js/config/pdf-tools.ts

@@ -62,4 +62,5 @@ export const multiFileTools = [
   'tiff-to-pdf',
   'alternate-merge',
   'linearize',
+  'reverse-pages',
 ];

src/js/handlers/fileHandler.ts

@@ -25,9 +25,9 @@ async function handleSinglePdfUpload(toolId, file) {
   showLoader('Loading PDF...');
   try {
     const pdfBytes = await readFileAsArrayBuffer(file);
-    state.pdfDoc = await PDFLibDocument.load(pdfBytes as ArrayBuffer, {
-      ignoreEncryption: true,
-    });
+    const pdfDoc = await PDFLibDocument.load(pdfBytes as ArrayBuffer, { ignoreEncryption: true });
+    state.pdfDocs = [pdfDoc];
+    state.pdfDoc = pdfDoc;
     hideLoader();
 
     if (
@@ -324,7 +324,8 @@ async function handleSinglePdfUpload(toolId, file) {
 }
 
 async function handleMultiFileUpload(toolId) {
-  if (toolId === 'merge' || toolId === 'alternate-merge') {
+  console.log(toolId);
+  if (toolId === 'merge' || toolId === 'alternate-merge' || toolId === 'reverse-pages') {
     const pdfFilesUnloaded: File[] = [];
 
     state.files.forEach((file) => {
@@ -346,7 +347,7 @@ async function handleMultiFileUpload(toolId) {
         };
       })
     );
-
+    state.pdfDocs = pdfFilesLoaded.map(p => p.pdfDoc);
     const foundEncryptedPDFs = pdfFilesLoaded.filter(
       (pdf) => pdf.pdfDoc.isEncrypted
     );

src/js/logic/reverse-pages.ts

@@ -3,29 +3,35 @@ import { downloadFile } from '../utils/helpers.js';
 import { state } from '../state.js';
 
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
+import JSZip from 'jszip';
 
 export async function reversePages() {
-  if (!state.pdfDoc) {
+  const pdfDocs = Array.isArray(state.pdfDocs) ? state.pdfDocs : state.pdfDoc ? [state.pdfDoc] : [];
+  if (!pdfDocs.length) {
     showAlert('Error', 'PDF not loaded.');
     return;
   }
   showLoader('Reversing page order...');
   try {
-    const newPdf = await PDFLibDocument.create();
-    const pageCount = state.pdfDoc.getPageCount();
-    const reversedIndices = Array.from(
-      { length: pageCount },
-      (_, i) => pageCount - 1 - i
-    );
+    const zip = new JSZip();
+    for (let j = 0; j < pdfDocs.length; j++) {
+      const pdfDoc = pdfDocs[j];
+      const newPdf = await PDFLibDocument.create();
+      const pageCount = pdfDoc.getPageCount();
+      const reversedIndices = Array.from(
+        { length: pageCount },
+        (_, i) => pageCount - 1 - i
+      );
 
-    const copiedPages = await newPdf.copyPages(state.pdfDoc, reversedIndices);
-    copiedPages.forEach((page: any) => newPdf.addPage(page));
+      const copiedPages = await newPdf.copyPages(pdfDoc, reversedIndices);
+      copiedPages.forEach((page: any) => newPdf.addPage(page));
 
-    const newPdfBytes = await newPdf.save();
-    downloadFile(
-      new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }),
-      'reversed.pdf'
-    );
+      const newPdfBytes = await newPdf.save();
+      const fileName = pdfDocs.length > 1 ? `reversed_${j + 1}.pdf` : 'reversed.pdf';
+      zip.file(fileName, newPdfBytes);
+    }
+    const zipBlob = await zip.generateAsync({ type: 'blob' });
+    downloadFile(zipBlob, 'reversed_pdfs.zip');
   } catch (e) {
     console.error(e);
     showAlert('Error', 'Could not reverse the PDF pages.');

src/js/state.ts

@@ -1,6 +1,7 @@
 export const state = {
   activeTool: null,
   files: [],
+  pdfDocs: [],
   pdfDoc: null,
   pdfPages: [],
   currentPdfUrl: null,
@@ -10,6 +11,7 @@ export const state = {
 export function resetState() {
   state.activeTool = null;
   state.files = [];
+  state.pdfDocs = [];
   state.pdfDoc = null;
   state.pdfPages = [];
   state.currentPdfUrl = null;

src/js/ui.ts

@@ -969,7 +969,7 @@ export const toolTemplates = {
   'reverse-pages': () => `
         <h2 class="text-2xl font-bold text-white mb-4">Reverse PDF Pages</h2>
         <p class="mb-6 text-gray-400">Flip the order of all pages in your document, making the last page the first.</p>
-        ${createFileInputHTML()}
+        ${createFileInputHTML({ multiple: true, accept: 'application/pdf', showControls: true })}
         <div id="file-display-area" class="mt-4 space-y-2"></div>
         <button id="process-btn" class="hidden btn-gradient w-full mt-6">Reverse & Download</button>
     `,