feat: support multiple PDF in PDF encryption tool

This commit is contained in:
alam00000
2026-03-01 18:43:38 +05:30
parent 0695361469
commit d66287a55b
3 changed files with 310 additions and 163 deletions

View File

@@ -1,14 +1,20 @@
import { showAlert } from '../ui.js';
import { downloadFile, formatBytes, initializeQpdf, readFileAsArrayBuffer } from '../utils/helpers.js';
import {
downloadFile,
formatBytes,
initializeQpdf,
readFileAsArrayBuffer,
} from '../utils/helpers.js';
import { icons, createIcons } from 'lucide';
import JSZip from 'jszip';
import { DecryptPdfState } from '@/types';
const pageState: DecryptPdfState = {
file: null,
files: [],
};
function resetState() {
pageState.file = null;
pageState.files = [];
const fileDisplayArea = document.getElementById('file-display-area');
if (fileDisplayArea) fileDisplayArea.innerHTML = '';
@@ -16,84 +22,100 @@ function resetState() {
const toolOptions = document.getElementById('tool-options');
if (toolOptions) toolOptions.classList.add('hidden');
const fileControls = document.getElementById('file-controls');
if (fileControls) fileControls.classList.add('hidden');
const fileInput = document.getElementById('file-input') as HTMLInputElement;
if (fileInput) fileInput.value = '';
const passwordInput = document.getElementById('password-input') as HTMLInputElement;
const passwordInput = document.getElementById(
'password-input'
) as HTMLInputElement;
if (passwordInput) passwordInput.value = '';
}
async function updateUI() {
const fileDisplayArea = document.getElementById('file-display-area');
const toolOptions = document.getElementById('tool-options');
const fileControls = document.getElementById('file-controls');
if (!fileDisplayArea) return;
fileDisplayArea.innerHTML = '';
if (pageState.file) {
if (pageState.files.length > 0) {
pageState.files.forEach((file, index) => {
const fileDiv = document.createElement('div');
fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
fileDiv.className =
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
const infoContainer = document.createElement('div');
infoContainer.className = 'flex flex-col overflow-hidden';
const nameSpan = document.createElement('div');
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
nameSpan.textContent = pageState.file.name;
nameSpan.textContent = file.name;
const metaSpan = document.createElement('div');
metaSpan.className = 'text-xs text-gray-400';
metaSpan.textContent = formatBytes(pageState.file.size);
metaSpan.textContent = formatBytes(file.size);
infoContainer.append(nameSpan, metaSpan);
const removeBtn = document.createElement('button');
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
removeBtn.className =
'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
removeBtn.onclick = function () {
resetState();
pageState.files.splice(index, 1);
updateUI();
};
fileDiv.append(infoContainer, removeBtn);
fileDisplayArea.appendChild(fileDiv);
});
createIcons({ icons });
if (toolOptions) toolOptions.classList.remove('hidden');
if (fileControls) fileControls.classList.remove('hidden');
} else {
if (toolOptions) toolOptions.classList.add('hidden');
if (fileControls) fileControls.classList.add('hidden');
}
}
function handleFileSelect(files: FileList | null) {
if (files && files.length > 0) {
const file = files[0];
if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
pageState.file = file;
const pdfFiles = Array.from(files).filter(
(f) =>
f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf')
);
if (pdfFiles.length > 0) {
pageState.files.push(...pdfFiles);
updateUI();
}
}
}
async function decryptPdf() {
if (!pageState.file) {
showAlert('No File', 'Please upload a PDF file first.');
if (pageState.files.length === 0) {
showAlert('No File', 'Please upload at least one PDF file.');
return;
}
const password = (document.getElementById('password-input') as HTMLInputElement)?.value;
const password = (
document.getElementById('password-input') as HTMLInputElement
)?.value;
if (!password) {
showAlert('Input Required', 'Please enter the PDF password.');
return;
}
const inputPath = '/input.pdf';
const outputPath = '/output.pdf';
let qpdf: any;
const loaderModal = document.getElementById('loader-modal');
const loaderText = document.getElementById('loader-text');
let qpdf: any;
try {
if (loaderModal) loaderModal.classList.remove('hidden');
@@ -101,21 +123,29 @@ async function decryptPdf() {
qpdf = await initializeQpdf();
if (loaderText) loaderText.textContent = 'Reading encrypted PDF...';
const fileBuffer = await readFileAsArrayBuffer(pageState.file);
const uint8Array = new Uint8Array(fileBuffer as ArrayBuffer);
if (pageState.files.length === 1) {
// Single file: decrypt and download directly
const file = pageState.files[0];
const inputPath = '/input.pdf';
const outputPath = '/output.pdf';
try {
if (loaderText) loaderText.textContent = 'Reading encrypted PDF...';
const fileBuffer = await readFileAsArrayBuffer(file);
const uint8Array = new Uint8Array(fileBuffer as ArrayBuffer);
qpdf.FS.writeFile(inputPath, uint8Array);
if (loaderText) loaderText.textContent = 'Decrypting PDF...';
const args = [inputPath, '--password=' + password, '--decrypt', outputPath];
const args = [
inputPath,
'--password=' + password,
'--decrypt',
outputPath,
];
try {
qpdf.callMain(args);
} catch (qpdfError: any) {
console.error('qpdf execution error:', qpdfError);
if (
qpdfError.message?.includes('invalid password') ||
qpdfError.message?.includes('password')
@@ -132,19 +162,121 @@ async function decryptPdf() {
throw new Error('Decryption resulted in an empty file.');
}
const blob = new Blob([outputFile], { type: 'application/pdf' });
downloadFile(blob, `unlocked-${pageState.file.name}`);
const blob = new Blob([new Uint8Array(outputFile)], {
type: 'application/pdf',
});
downloadFile(blob, `unlocked-${file.name}`);
if (loaderModal) loaderModal.classList.add('hidden');
showAlert(
'Success',
'PDF decrypted successfully! Your download has started.',
'success',
() => { resetState(); }
() => {
resetState();
}
);
} finally {
try {
if (qpdf?.FS) {
if (qpdf.FS.analyzePath(inputPath).exists)
qpdf.FS.unlink(inputPath);
if (qpdf.FS.analyzePath(outputPath).exists)
qpdf.FS.unlink(outputPath);
}
} catch (cleanupError) {
console.warn('Failed to cleanup WASM FS:', cleanupError);
}
}
} else {
// Multiple files: decrypt all and download as ZIP
const zip = new JSZip();
let successCount = 0;
let errorCount = 0;
for (let i = 0; i < pageState.files.length; i++) {
const file = pageState.files[i];
const inputPath = `/input_${i}.pdf`;
const outputPath = `/output_${i}.pdf`;
if (loaderText)
loaderText.textContent = `Decrypting ${file.name} (${i + 1}/${pageState.files.length})...`;
try {
const fileBuffer = await readFileAsArrayBuffer(file);
const uint8Array = new Uint8Array(fileBuffer as ArrayBuffer);
qpdf.FS.writeFile(inputPath, uint8Array);
const args = [
inputPath,
'--password=' + password,
'--decrypt',
outputPath,
];
try {
qpdf.callMain(args);
} catch (qpdfError: any) {
if (
qpdfError.message?.includes('invalid password') ||
qpdfError.message?.includes('password')
) {
throw new Error(`Invalid password for ${file.name}`);
}
throw qpdfError;
}
const outputFile = qpdf.FS.readFile(outputPath, {
encoding: 'binary',
});
if (!outputFile || outputFile.length === 0) {
throw new Error(
`Decryption resulted in an empty file for ${file.name}.`
);
}
zip.file(`unlocked-${file.name}`, outputFile, { binary: true });
successCount++;
} catch (fileError: any) {
errorCount++;
console.error(`Failed to decrypt ${file.name}:`, fileError);
} finally {
try {
if (qpdf?.FS) {
if (qpdf.FS.analyzePath(inputPath).exists)
qpdf.FS.unlink(inputPath);
if (qpdf.FS.analyzePath(outputPath).exists)
qpdf.FS.unlink(outputPath);
}
} catch (cleanupError) {
console.warn(
`Failed to cleanup WASM FS for ${file.name}:`,
cleanupError
);
}
}
}
if (successCount === 0) {
throw new Error(
'No PDF files could be decrypted. The password may be incorrect.'
);
}
if (loaderText) loaderText.textContent = 'Generating ZIP file...';
const zipBlob = await zip.generateAsync({ type: 'blob' });
downloadFile(zipBlob, 'decrypted-pdfs.zip');
let alertMessage = `${successCount} PDF(s) decrypted successfully.`;
if (errorCount > 0) {
alertMessage += ` ${errorCount} file(s) failed.`;
}
showAlert('Processing Complete', alertMessage, 'success', () => {
resetState();
});
}
} catch (error: any) {
console.error('Error during PDF decryption:', error);
if (loaderModal) loaderModal.classList.add('hidden');
if (error.message === 'INVALID_PASSWORD') {
showAlert(
@@ -163,22 +295,7 @@ async function decryptPdf() {
);
}
} finally {
try {
if (qpdf?.FS) {
try {
qpdf.FS.unlink(inputPath);
} catch (e) {
console.warn('Failed to unlink input file:', e);
}
try {
qpdf.FS.unlink(outputPath);
} catch (e) {
console.warn('Failed to unlink output file:', e);
}
}
} catch (cleanupError) {
console.warn('Failed to cleanup WASM FS:', cleanupError);
}
if (loaderModal) loaderModal.classList.add('hidden');
}
}
@@ -186,6 +303,8 @@ document.addEventListener('DOMContentLoaded', function () {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
const dropZone = document.getElementById('drop-zone');
const processBtn = document.getElementById('process-btn');
const addMoreBtn = document.getElementById('add-more-btn');
const clearFilesBtn = document.getElementById('clear-files-btn');
const backBtn = document.getElementById('back-to-tools');
if (backBtn) {
@@ -212,17 +331,7 @@ document.addEventListener('DOMContentLoaded', function () {
dropZone.addEventListener('drop', function (e) {
e.preventDefault();
dropZone.classList.remove('bg-gray-700');
const files = e.dataTransfer?.files;
if (files && files.length > 0) {
const pdfFiles = Array.from(files).filter(function (f) {
return f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
});
if (pdfFiles.length > 0) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(pdfFiles[0]);
handleFileSelect(dataTransfer.files);
}
}
handleFileSelect(e.dataTransfer?.files);
});
fileInput.addEventListener('click', function () {
@@ -233,4 +342,17 @@ document.addEventListener('DOMContentLoaded', function () {
if (processBtn) {
processBtn.addEventListener('click', decryptPdf);
}
if (addMoreBtn) {
addMoreBtn.addEventListener('click', function () {
fileInput.value = '';
fileInput.click();
});
}
if (clearFilesBtn) {
clearFilesBtn.addEventListener('click', function () {
resetState();
});
}
});

View File

@@ -1,3 +1,3 @@
export interface DecryptPdfState {
file: File | null;
files: File[];
}

View File

@@ -141,6 +141,12 @@
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p
class="text-xs text-gray-500"
data-i18n="upload.hints.singleOrMultiplePdfs"
>
Single or multiple PDF files supported
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
@@ -150,9 +156,28 @@
type="file"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
accept="application/pdf"
multiple
/>
</div>
<!-- Control buttons for multi-file uploads -->
<div id="file-controls" class="hidden mt-4 flex gap-3">
<button
id="add-more-btn"
class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
>
<i data-lucide="plus"></i>
<span data-i18n="upload.addMore">Add More Files</span>
</button>
<button
id="clear-files-btn"
class="btn bg-gray-600 hover:bg-gray-500 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
>
<i data-lucide="trash-2"></i>
<span data-i18n="upload.clearAll">Clear All</span>
</button>
</div>
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="tool-options" class="hidden mt-6 space-y-4">