\n Split Mode\n setOptions({ ...options, mode: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n

\n \n {options.mode === 'pages' && (\n

\n \n Pages (comma-separated, e.g., 1,3,5)\n \n setOptions({ \n ...options, \n pagesInput: e.target.value,\n pages: e.target.value.split(',').map(p => parseInt(p.trim())).filter(p => !isNaN(p))\n })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n \n {options.mode === 'range' && (\n

\n Start Page\n setOptions({ ...options, startPage: parseInt(e.target.value) })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n End Page\n setOptions({ ...options, endPage: parseInt(e.target.value) })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n

\n );\n\n case 'rotate':\n return (\n

\n Rotation Angle\n setOptions({ ...options, angle: parseInt(e.target.value) })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n \n Pages (leave empty for all pages)\n \n setOptions({ \n ...options, \n pagesInput: e.target.value,\n pages: e.target.value ? e.target.value.split(',').map(p => parseInt(p.trim())).filter(p => !isNaN(p)) : undefined\n })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n );\n\n case 'protect':\n return (\n

\n Password\n setOptions({ ...options, password: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n );\n\n case 'pdf-to-images':\n return (\n

\n Output Format\n setOptions({ ...options, format: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n

\n DPI Quality\n setOptions({ ...options, dpi: parseInt(e.target.value) })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n );\n\n default:\n return null;\n }\n };\n\n return (\n

\n {/* File Upload Area */}\n fileInputRef.current?.click()}\n >\n \n \n

📁

\n {tool.type === 'images-to-pdf' ? 'Drop images here or click to browse' : 'Drop PDF files here or click to browse'}\n

\n {tool.type === 'merge' ? 'Select multiple PDF files to merge' :\n tool.type === 'images-to-pdf' ? 'Supports PNG, JPG, JPEG formats' :\n 'Select a PDF file to process'}\n

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

Selected Files:

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

\n 📄\n

{file.name}

\n {(file.size / 1024 / 1024).toFixed(2)} MB\n

\n removeFile(index)}\n className=\"text-red-500 hover:text-red-700 p-1\"\n >\n ✕\n \n

\n ))}\n

\n )}\n\n {/* Options */}\n {fileState.files.length > 0 && renderOptions()}\n\n {/* Process Button */}\n {fileState.files.length > 0 && (\n

\n onProcess(options)}\n disabled={!canProcess() || processing}\n className={`px-8 py-3 rounded-lg font-medium transition-colors ${\n canProcess() && !processing\n ? 'bg-blue-600 text-white hover:bg-blue-700'\n : 'bg-gray-300 text-gray-500 cursor-not-allowed'\n } ${processing ? 'processing' : ''}`}\n >\n {processing ? 'Processing...' : `Process with ${tool.name}`}\n \n

\n )}\n\n {/* Requirements */}\n

Requirements:

• Select at least 2 PDF files to merge
• Enter a password to protect the PDF
• Upload PNG, JPG, or JPEG image files
• Maximum file size: 50MB per file
• Files are processed securely and not stored

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