Merge PDFs

\n \n {/* File Upload Area */}\n fileInputRef.current?.click()}\n >\n e.target.files && handleFilesSelect(e.target.files)}\n className=\"hidden\"\n />\n \n

📄

Drop PDF files here or click to browse

Select multiple PDF files to merge

\n\n {/* File List */}\n {files.length > 0 && (\n

\n Files to Merge ({files.length} files, {totalPages} total pages)\n

\n {files.map(({ file, info }, index) => (\n

\n {index + 1}.\n

{info.filename}

\n {info.pageCount} pages • {formatFileSize(info.size)}\n

\n moveFile(index, index - 1)}\n disabled={index === 0}\n className=\"p-2 text-gray-400 hover:text-blue-400 disabled:opacity-30 transition-all hover:scale-110\"\n title=\"Move up\"\n >\n ⬆️\n \n moveFile(index, index + 1)}\n disabled={index === files.length - 1}\n className=\"p-2 text-gray-400 hover:text-blue-400 disabled:opacity-30 transition-all hover:scale-110\"\n title=\"Move down\"\n >\n ⬇️\n \n removeFile(index)}\n className=\"p-2 text-red-400 hover:text-red-300 transition-all hover:scale-110\"\n title=\"Remove\"\n >\n 🗑️\n \n

\n ))}\n

\n )}\n\n {/* Output Filename */}\n {files.length > 0 && (\n

\n \n Output Filename\n \n setOutputFilename(e.target.value)}\n placeholder=\"merged.pdf\"\n className=\"input-3d w-full px-4 py-3 rounded-lg text-white placeholder-gray-400 focus:outline-none transition-all\"\n />\n

\n )}\n\n {/* Merge Button */}\n \n {isProcessing ? (\n \n \n Processing...\n \n ) : (\n '🔗 Merge PDFs'\n )}\n \n\n {files.length === 1 && (\n

\n Add at least one more PDF file to enable merging\n

\n )}\n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/pro989/pdf/code/frontend/components/PdfMerger.tsx","extension","actionData","errors"]