feat(pdf-tools): add attachments feature to embed files in PDFs
Implement new functionality to allow embedding attachments into PDF documents. The feature includes: - UI for selecting PDF and files to attach - Logic to embed files while preserving metadata - Display of attached files with size information - Download of modified PDF with embedded files
This commit is contained in:
125
src/js/logic/add-attachments.ts
Normal file
125
src/js/logic/add-attachments.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { showLoader, hideLoader, showAlert } from '../ui';
|
||||
import { readFileAsArrayBuffer, downloadFile } from '../utils/helpers';
|
||||
import { state } from '../state';
|
||||
let attachments: File[] = [];
|
||||
|
||||
export async function addAttachments() {
|
||||
if (!state.pdfDoc) {
|
||||
showAlert('Error', 'Main PDF is not loaded.');
|
||||
return;
|
||||
}
|
||||
if (attachments.length === 0) {
|
||||
showAlert('No Files', 'Please select at least one file to attach.');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoader('Embedding files into PDF...');
|
||||
try {
|
||||
const pdfDoc = state.pdfDoc;
|
||||
|
||||
for (let i = 0; i < attachments.length; i++) {
|
||||
const file = attachments[i];
|
||||
showLoader(`Attaching ${file.name} (${i + 1}/${attachments.length})...`);
|
||||
|
||||
const fileBytes = await readFileAsArrayBuffer(file);
|
||||
|
||||
await pdfDoc.attach(fileBytes as ArrayBuffer, file.name, {
|
||||
mimeType: file.type || 'application/octet-stream',
|
||||
description: `Attached file: ${file.name}`,
|
||||
creationDate: new Date(),
|
||||
modificationDate: new Date(file.lastModified),
|
||||
});
|
||||
}
|
||||
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
downloadFile(
|
||||
new Blob([pdfBytes], { type: 'application/pdf' }),
|
||||
`attached-${state.files[0].name}`
|
||||
);
|
||||
|
||||
showAlert(
|
||||
'Success',
|
||||
`${attachments.length} file(s) attached successfully.`
|
||||
);
|
||||
} catch (error: any) {
|
||||
console.error('Error attaching files:', error);
|
||||
showAlert('Error', `Failed to attach files: ${error.message}`);
|
||||
} finally {
|
||||
hideLoader();
|
||||
clearAttachments();
|
||||
}
|
||||
}
|
||||
|
||||
function clearAttachments() {
|
||||
attachments = [];
|
||||
const fileListDiv = document.getElementById('attachment-file-list');
|
||||
const attachmentInput = document.getElementById(
|
||||
'attachment-files-input'
|
||||
) as HTMLInputElement;
|
||||
const processBtn = document.getElementById(
|
||||
'process-btn'
|
||||
) as HTMLButtonElement;
|
||||
|
||||
if (fileListDiv) fileListDiv.innerHTML = '';
|
||||
if (attachmentInput) attachmentInput.value = '';
|
||||
if (processBtn) {
|
||||
processBtn.disabled = true;
|
||||
processBtn.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
let isSetup = false; // Prevent duplicate setup
|
||||
|
||||
export function setupAddAttachmentsTool() {
|
||||
if (isSetup) return; // Already set up
|
||||
isSetup = true;
|
||||
|
||||
const optionsDiv = document.getElementById('attachment-options');
|
||||
const attachmentInput = document.getElementById(
|
||||
'attachment-files-input'
|
||||
) as HTMLInputElement;
|
||||
const fileListDiv = document.getElementById('attachment-file-list');
|
||||
const processBtn = document.getElementById(
|
||||
'process-btn'
|
||||
) as HTMLButtonElement;
|
||||
|
||||
if (!optionsDiv || !attachmentInput || !fileListDiv || !processBtn) {
|
||||
console.error('Attachment tool UI elements not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
optionsDiv.classList.remove('hidden');
|
||||
|
||||
attachmentInput.addEventListener('change', (e) => {
|
||||
const files = (e.target as HTMLInputElement).files;
|
||||
if (files && files.length > 0) {
|
||||
attachments = Array.from(files);
|
||||
|
||||
fileListDiv.innerHTML = '';
|
||||
attachments.forEach((file) => {
|
||||
const div = document.createElement('div');
|
||||
div.className =
|
||||
'flex justify-between items-center p-2 bg-gray-800 rounded-md text-white';
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'truncate text-sm';
|
||||
nameSpan.textContent = file.name;
|
||||
|
||||
const sizeSpan = document.createElement('span');
|
||||
sizeSpan.className = 'text-xs text-gray-400';
|
||||
sizeSpan.textContent = `${Math.round(file.size / 1024)} KB`;
|
||||
|
||||
div.appendChild(nameSpan);
|
||||
div.appendChild(sizeSpan);
|
||||
fileListDiv.appendChild(div);
|
||||
});
|
||||
|
||||
processBtn.disabled = false;
|
||||
processBtn.classList.remove('hidden');
|
||||
} else {
|
||||
clearAttachments();
|
||||
}
|
||||
});
|
||||
|
||||
processBtn.onclick = addAttachments;
|
||||
}
|
||||
Reference in New Issue
Block a user