mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 19:33:11 +02:00
Basic homepage with compress and split
This commit is contained in:
Reece Browne
@@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
||||
+222
-89
@@ -1,97 +1,230 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import ConstructionIcon from '@mui/icons-material/Construction';
|
||||
import AddToPhotosIcon from '@mui/icons-material/AddToPhotos';
|
||||
import ContentCutIcon from '@mui/icons-material/ContentCut';
|
||||
import RotateRightIcon from '@mui/icons-material/RotateRight';
|
||||
import CropIcon from '@mui/icons-material/Crop';
|
||||
import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import DashboardIcon from '@mui/icons-material/Dashboard';
|
||||
import FullscreenIcon from '@mui/icons-material/Fullscreen';
|
||||
import FileUploadIcon from '@mui/icons-material/FileUpload';
|
||||
import LooksOneIcon from '@mui/icons-material/LooksOne';
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
||||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
||||
import LinkIcon from '@mui/icons-material/Link';
|
||||
import CodeIcon from '@mui/icons-material/Code';
|
||||
import TableChartIcon from '@mui/icons-material/TableChart';
|
||||
import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstructions';
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import LockOpenIcon from '@mui/icons-material/LockOpen';
|
||||
import EditNoteIcon from '@mui/icons-material/EditNote';
|
||||
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
|
||||
import VerifiedIcon from '@mui/icons-material/Verified';
|
||||
import RemoveModeratorIcon from '@mui/icons-material/RemoveModerator';
|
||||
import SanitizerIcon from '@mui/icons-material/Sanitizer';
|
||||
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
||||
import DrawIcon from '@mui/icons-material/Draw';
|
||||
import ApprovalIcon from '@mui/icons-material/Approval';
|
||||
import WaterDropIcon from '@mui/icons-material/WaterDrop';
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
|
||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||||
import CollectionsIcon from '@mui/icons-material/Collections';
|
||||
import LayersClearIcon from '@mui/icons-material/LayersClear';
|
||||
import ScannerIcon from '@mui/icons-material/Scanner';
|
||||
import NoteAltIcon from '@mui/icons-material/NoteAlt';
|
||||
import CompareIcon from '@mui/icons-material/Compare';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
|
||||
import InvertColorsIcon from '@mui/icons-material/InvertColors';
|
||||
import AccountTreeIcon from '@mui/icons-material/AccountTree';
|
||||
import PaletteIcon from '@mui/icons-material/Palette';
|
||||
import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
|
||||
import BuildIcon from '@mui/icons-material/Build';
|
||||
import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutline';
|
||||
import JavascriptIcon from '@mui/icons-material/Javascript';
|
||||
import SegmentIcon from '@mui/icons-material/Segment';
|
||||
import LayersIcon from '@mui/icons-material/Layers';
|
||||
import GridOnIcon from '@mui/icons-material/GridOn';
|
||||
import AutoStoriesIcon from '@mui/icons-material/AutoStories';
|
||||
import Icon from '@mui/material/Icon';
|
||||
|
||||
export default function HomePage() {
|
||||
const [homeText, setHomeText] = useState("");
|
||||
const [showSurvey, setShowSurvey] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [favoritesVisible, setFavoritesVisible] = useState(true);
|
||||
import SplitPdfPanel from "../tools/Split";
|
||||
import CompressPdfPanel from "../tools/Compress-pdf";
|
||||
|
||||
useEffect(() => {
|
||||
setHomeText("Your document tools in one secure place");
|
||||
}, []);
|
||||
const toolRegistry = {
|
||||
"split-pdf": { icon: <PictureAsPdfIcon />, name: "Split PDF", component: SplitPdfPanel },
|
||||
"compress-pdf": { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel }
|
||||
};
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "redact",
|
||||
icon: "🖊️",
|
||||
title: "Redact PDF",
|
||||
description: "Remove sensitive content",
|
||||
tags: ["security"]
|
||||
},
|
||||
{
|
||||
id: "multi-tool",
|
||||
icon: "🛠️",
|
||||
title: "Multi-Tool",
|
||||
description: "Bundle many tools together",
|
||||
tags: ["organize"]
|
||||
},
|
||||
{
|
||||
id: "validate-signature",
|
||||
icon: "✔️",
|
||||
title: "Validate Signature",
|
||||
description: "Check document authenticity",
|
||||
tags: ["security"]
|
||||
}
|
||||
];
|
||||
|
||||
const filteredFeatures = features.filter(f =>
|
||||
f.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
const tools = Object.entries(toolRegistry).map(([id, { icon, name }]) => ({ id, icon, name }));
|
||||
|
||||
// Example tool panels
|
||||
function ToolPanel({ selectedTool }) {
|
||||
if (!selectedTool) {
|
||||
return (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<p className="text-sm">Select a tool to begin interacting with the PDF.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={{ padding: "2rem" }}>
|
||||
<h1>{homeText}</h1>
|
||||
|
||||
<div style={{ margin: "1rem 0" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tools..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{ padding: "0.5rem", width: "200px" }}
|
||||
/>
|
||||
|
||||
<select style={{ marginLeft: "1rem", padding: "0.5rem" }}>
|
||||
<option value="alphabetical">Alphabetical</option>
|
||||
<option value="global">Global Popularity</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => setFavoritesVisible(!favoritesVisible)}
|
||||
style={{ marginLeft: "1rem", padding: "0.5rem" }}
|
||||
>
|
||||
{favoritesVisible ? "Hide" : "Show"} Favorites
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{favoritesVisible && (
|
||||
<div style={{ margin: "1rem 0" }}>
|
||||
<h2>Favorite Tools</h2>
|
||||
<p>(You can add favorites here later)</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h2>Recent Features</h2>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
|
||||
{filteredFeatures.map((f) => (
|
||||
<div
|
||||
key={f.id}
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
padding: "1rem",
|
||||
borderRadius: "8px",
|
||||
width: "200px"
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "2rem" }}>{f.icon}</div>
|
||||
<h3>{f.title}</h3>
|
||||
<p>{f.description}</p>
|
||||
<small>{f.tags.join(", ")}</small>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
|
||||
<p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const tools = [
|
||||
{ id: "multi-tool", icon: <ConstructionIcon />, name: "Multi-Tool" },
|
||||
{ id: "merge-pdfs", icon: <AddToPhotosIcon />, name: "Merge PDFs" },
|
||||
{ id: "split-pdf", icon: <ContentCutIcon />, name: "Split PDF" },
|
||||
{ id: "rotate-pdf", icon: <RotateRightIcon />, name: "Rotate Pages" },
|
||||
{ id: "crop", icon: <CropIcon />, name: "Crop PDF" },
|
||||
{ id: "pdf-organizer", icon: <FormatListBulletedIcon />, name: "PDF Organizer" },
|
||||
{ id: "remove-pages", icon: <DeleteIcon />, name: "Remove Pages" },
|
||||
{ id: "multi-page-layout", icon: <DashboardIcon />, name: "Page Layout" },
|
||||
{ id: "scale-pages", icon: <FullscreenIcon />, name: "Scale Pages" },
|
||||
{ id: "extract-page", icon: <FileUploadIcon />, name: "Extract Page" },
|
||||
{ id: "pdf-to-single-page", icon: <LooksOneIcon />, name: "PDF to Single Page" },
|
||||
{ id: "img-to-pdf", icon: <PictureAsPdfIcon />, name: "Image to PDF" },
|
||||
{ id: "file-to-pdf", icon: <InsertDriveFileIcon />, name: "File to PDF" },
|
||||
{ id: "url-to-pdf", icon: <LinkIcon />, name: "URL to PDF" },
|
||||
{ id: "html-to-pdf", icon: <CodeIcon />, name: "HTML to PDF" },
|
||||
{ id: "markdown-to-pdf", icon: <IntegrationInstructionsIcon />, name: "Markdown to PDF" },
|
||||
{ id: "pdf-to-img", icon: <CollectionsIcon />, name: "PDF to Image" },
|
||||
{ id: "pdf-to-pdfa", icon: <PictureAsPdfIcon />, name: "PDF to PDF/A" },
|
||||
{ id: "pdf-to-word", icon: <InsertDriveFileIcon />, name: "PDF to Word" },
|
||||
{ id: "pdf-to-presentation", icon: <DashboardIcon />, name: "PDF to Presentation" },
|
||||
{ id: "pdf-to-text", icon: <AssignmentIcon />, name: "PDF to Text" },
|
||||
{ id: "pdf-to-html", icon: <CodeIcon />, name: "PDF to HTML" },
|
||||
{ id: "pdf-to-xml", icon: <CodeIcon />, name: "PDF to XML" },
|
||||
{ id: "pdf-to-csv", icon: <TableChartIcon />, name: "PDF to CSV" },
|
||||
{ id: "pdf-to-markdown", icon: <IntegrationInstructionsIcon />, name: "PDF to Markdown" },
|
||||
{ id: "add-password", icon: <LockIcon />, name: "Add Password" },
|
||||
{ id: "remove-password", icon: <LockOpenIcon />, name: "Remove Password" },
|
||||
{ id: "change-permissions", icon: <LockIcon />, name: "Change Permissions" },
|
||||
{ id: "sign", icon: <EditNoteIcon />, name: "Sign PDF" },
|
||||
{ id: "cert-sign", icon: <WorkspacePremiumIcon />, name: "Certify Signature" },
|
||||
{ id: "validate-signature", icon: <VerifiedIcon />, name: "Validate Signature" },
|
||||
{ id: "remove-cert-sign", icon: <RemoveModeratorIcon />, name: "Remove Cert Signature" },
|
||||
{ id: "sanitize-pdf", icon: <SanitizerIcon />, name: "Sanitize PDF" },
|
||||
{ id: "auto-redact", icon: <VisibilityOffIcon />, name: "Auto Redact" },
|
||||
{ id: "redact", icon: <DrawIcon />, name: "Manual Redact" },
|
||||
{ id: "stamp", icon: <ApprovalIcon />, name: "Add Stamp" },
|
||||
{ id: "add-watermark", icon: <WaterDropIcon />, name: "Add Watermark" },
|
||||
{ id: "view-pdf", icon: <MenuBookIcon />, name: "View PDF" },
|
||||
{ id: "add-page-numbers", icon: <LooksOneIcon />, name: "Add Page Numbers" },
|
||||
{ id: "add-image", icon: <AddPhotoAlternateIcon />, name: "Add Image" },
|
||||
{ id: "change-metadata", icon: <AssignmentIcon />, name: "Change Metadata" },
|
||||
{ id: "ocr-pdf", icon: <LayersIcon />, name: "OCR PDF" },
|
||||
{ id: "extract-images", icon: <CollectionsIcon />, name: "Extract Images" },
|
||||
{ id: "flatten", icon: <LayersClearIcon />, name: "Flatten PDF" },
|
||||
{ id: "remove-blanks", icon: <ScannerIcon />, name: "Remove Blank Pages" },
|
||||
{ id: "remove-annotations", icon: <NoteAltIcon />, name: "Remove Annotations" },
|
||||
{ id: "compare", icon: <CompareIcon />, name: "Compare PDFs" },
|
||||
{ id: "get-info-on-pdf", icon: <InfoIcon />, name: "PDF Info" },
|
||||
{ id: "remove-image-pdf", icon: <HighlightOffIcon />, name: "Remove Images from PDF" },
|
||||
{ id: "replace-and-invert-color-pdf", icon: <InvertColorsIcon />, name: "Invert Colors" },
|
||||
{ id: "unlock-pdf-forms", icon: <LayersIcon />, name: "Unlock PDF Forms" },
|
||||
{ id: "pipeline", icon: <AccountTreeIcon />, name: "Pipeline" },
|
||||
{ id: "adjust-contrast", icon: <PaletteIcon />, name: "Adjust Contrast" },
|
||||
{ id: "compress-pdf", icon: <ZoomInMapIcon />, name: "Compress PDF" },
|
||||
{ id: "extract-image-scans", icon: <ScannerIcon />, name: "Extract Image Scans" },
|
||||
{ id: "repair", icon: <BuildIcon />, name: "Repair PDF" },
|
||||
{ id: "auto-rename", icon: <DriveFileRenameOutlineIcon />, name: "Auto Rename" },
|
||||
{ id: "show-javascript", icon: <JavascriptIcon />, name: "Show JavaScript" },
|
||||
{ id: "overlay-pdf", icon: <LayersIcon />, name: "Overlay PDF" },
|
||||
|
||||
];
|
||||
|
||||
const [selectedTool, setSelectedTool] = useState(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [pdfFile, setPdfFile] = useState(null);
|
||||
const SelectedComponent = selectedTool ? toolRegistry[selectedTool.id]?.component : null;
|
||||
const [downloadUrl, setDownloadUrl] = useState(null);
|
||||
|
||||
const filteredTools = tools.filter(tool =>
|
||||
tool.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
function handleFileUpload(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
const fileUrl = URL.createObjectURL(file);
|
||||
setPdfFile({ file, url: fileUrl });
|
||||
}
|
||||
}
|
||||
|
||||
return ( <div className="flex h-screen overflow-hidden">
|
||||
{/* Left Sidebar */}
|
||||
<div className="w-64 bg-gray-100 p-4 flex flex-col space-y-2 overflow-y-auto border-r">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tools..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="mb-3 px-2 py-1 border rounded text-sm"
|
||||
/>
|
||||
{filteredTools.map(tool => (
|
||||
<button
|
||||
key={tool.id}
|
||||
title={tool.name}
|
||||
onClick={() => setSelectedTool(tool)}
|
||||
className="flex items-center space-x-3 p-2 hover:bg-gray-200 rounded text-left"
|
||||
>
|
||||
<div className="text-xl leading-none flex items-center justify-center h-6 w-6">
|
||||
{tool.icon}
|
||||
</div>
|
||||
<span className="text-sm font-medium">{tool.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Central PDF Viewer Area */}
|
||||
<div className="flex-1 bg-white flex items-center justify-center overflow-hidden">
|
||||
<div className="w-full h-full max-w-5xl max-h-[95vh] border rounded shadow-md bg-gray-50 flex items-center justify-center">
|
||||
{!pdfFile ? (
|
||||
<label className="cursor-pointer text-blue-600 underline">
|
||||
Click to upload a PDF
|
||||
<input
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<iframe
|
||||
src={pdfFile.url}
|
||||
title="PDF Viewer"
|
||||
className="w-full h-full border-none"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar: Tool Interactions */}
|
||||
<div className="w-72 bg-gray-50 p-4 border-l overflow-y-auto">
|
||||
<h2 className="text-lg font-semibold mb-4">Tool Panel</h2>
|
||||
<div className="space-y-3">
|
||||
{SelectedComponent ? (
|
||||
<SelectedComponent file={pdfFile} downloadUrl setDownloadUrl />
|
||||
) : selectedTool ? (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<h3 className="font-semibold text-sm mb-2">{selectedTool.name}</h3>
|
||||
<p className="text-xs text-gray-600">This is the panel for {selectedTool.name}.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2 border rounded bg-white shadow-sm">
|
||||
<p className="text-sm">Select a tool to begin interacting with the PDF.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
export default function CompressPdfPanel({file}) {
|
||||
const [optimizeLevel, setOptimizeLevel] = useState("5");
|
||||
const [grayscale, setGrayscale] = useState(false);
|
||||
const [expectedOutputSize, setExpectedOutputSize] = useState("");
|
||||
const [status, setStatus] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!file) {
|
||||
setStatus("Please select a file.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("fileInput", file.file);
|
||||
formData.append("optimizeLevel", optimizeLevel);
|
||||
formData.append("grayscale", grayscale);
|
||||
if (expectedOutputSize) {
|
||||
formData.append("expectedOutputSize", expectedOutputSize);
|
||||
}
|
||||
|
||||
setStatus("Compressing...");
|
||||
|
||||
try {
|
||||
const response = await axios.post("/api/v1/misc/compress-pdf", formData, {
|
||||
responseType: "blob",
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", "compressed.pdf");
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
setStatus("Download ready!");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setStatus("Failed to compress PDF.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 text-sm">
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Compression Level (1-9)</label>
|
||||
<select
|
||||
value={optimizeLevel}
|
||||
onChange={(e) => setOptimizeLevel(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
>
|
||||
{[...Array(9)].map((_, i) => (
|
||||
<option key={i + 1} value={i + 1}>{i + 1}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="grayscale"
|
||||
checked={grayscale}
|
||||
onChange={(e) => setGrayscale(e.target.checked)}
|
||||
className="mr-2"
|
||||
/>
|
||||
<label htmlFor="grayscale">Convert images to grayscale</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block font-medium">Expected Output Size (e.g. 2MB)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={expectedOutputSize}
|
||||
onChange={(e) => setExpectedOutputSize(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
|
||||
Compress PDF
|
||||
</button>
|
||||
|
||||
{status && <p className="text-xs text-gray-600 mt-2">{status}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import React, { useState } from "react";
|
||||
import axios from "axios";
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
|
||||
export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
|
||||
const [mode, setMode] = useState("byPages");
|
||||
const [status, setStatus] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!file) {
|
||||
setStatus("Please upload a PDF first.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("fileInput", file.file);
|
||||
|
||||
let endpoint = "";
|
||||
if (mode === "byPages") {
|
||||
const pageNumbers = document.getElementById("pagesInput").value;
|
||||
formData.append("pageNumbers", pageNumbers);
|
||||
endpoint = "/api/v1/general/split-pages";
|
||||
} else if (mode === "bySections") {
|
||||
const horizontal = document.getElementById("horizontalDivisions").value;
|
||||
const vertical = document.getElementById("verticalDivisions").value;
|
||||
const merge = document.getElementById("merge").checked;
|
||||
formData.append("horizontalDivisions", horizontal);
|
||||
formData.append("verticalDivisions", vertical);
|
||||
formData.append("merge", merge);
|
||||
endpoint = "/api/v1/general/split-pdf-by-sections";
|
||||
} else if (mode === "bySizeOrCount") {
|
||||
const splitType = document.getElementById("splitType").value;
|
||||
const splitValue = document.getElementById("splitValue").value;
|
||||
formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
|
||||
formData.append("splitValue", splitValue);
|
||||
endpoint = "/api/v1/general/split-by-size-or-count";
|
||||
} else if (mode === "byChapters") {
|
||||
const bookmarkLevel = document.getElementById("bookmarkLevel").value;
|
||||
const includeMetadata = document.getElementById("includeMetadata").checked;
|
||||
const allowDuplicates = document.getElementById("allowDuplicates").checked;
|
||||
formData.append("bookmarkLevel", bookmarkLevel);
|
||||
formData.append("includeMetadata", includeMetadata);
|
||||
formData.append("allowDuplicates", allowDuplicates);
|
||||
endpoint = "/api/v1/general/split-pdf-by-chapters";
|
||||
}
|
||||
|
||||
setStatus("Processing split...");
|
||||
|
||||
try {
|
||||
const response = await axios.post(endpoint, formData, { responseType: "blob" });
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", "split_output.zip");
|
||||
document.body.appendChild(link);
|
||||
const blob = new Blob([response.data], { type: "application/zip" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
setDownloadUrl(url);
|
||||
setStatus("Download ready.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setStatus("Split failed.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="p-2 border rounded bg-white shadow-sm space-y-4 text-sm">
|
||||
<h3 className="font-semibold">Split PDF</h3>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Split Mode</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => setMode(e.target.value)}
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
>
|
||||
<option value="byPages">Split by Pages (e.g. 1,3,5-10)</option>
|
||||
<option value="bySections">Split by Grid Sections</option>
|
||||
<option value="bySizeOrCount">Split by Size or Count</option>
|
||||
<option value="byChapters">Split by Chapters</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{mode === "byPages" && (
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Pages</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pagesInput"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
placeholder="e.g. 1,3,5-10"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "bySections" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Horizontal Divisions</label>
|
||||
<input
|
||||
type="number"
|
||||
id="horizontalDivisions"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
min="0"
|
||||
max="300"
|
||||
defaultValue="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Vertical Divisions</label>
|
||||
<input
|
||||
type="number"
|
||||
id="verticalDivisions"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
min="0"
|
||||
max="300"
|
||||
defaultValue="1"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="merge" />
|
||||
<label htmlFor="merge">Merge sections into one PDF</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "bySizeOrCount" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Split Type</label>
|
||||
<select id="splitType" className="w-full border px-2 py-1 rounded">
|
||||
<option value="size">By Size</option>
|
||||
<option value="pages">By Page Count</option>
|
||||
<option value="docs">By Document Count</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Split Value</label>
|
||||
<input
|
||||
type="text"
|
||||
id="splitValue"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
placeholder="e.g. 10MB or 5 pages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "byChapters" && (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block font-medium mb-1">Bookmark Level</label>
|
||||
<input
|
||||
type="number"
|
||||
id="bookmarkLevel"
|
||||
className="w-full border px-2 py-1 rounded"
|
||||
defaultValue="0"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="includeMetadata" />
|
||||
<label htmlFor="includeMetadata">Include Metadata</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="checkbox" id="allowDuplicates" />
|
||||
<label htmlFor="allowDuplicates">Allow Duplicate Bookmarks</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded mt-2">
|
||||
Split PDF
|
||||
</button>
|
||||
|
||||
{status && <p className="text-xs text-gray-600">{status}</p>}
|
||||
|
||||
{status === "Download ready." && downloadUrl && (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
download="split_output.zip"
|
||||
className="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 transition mt-2"
|
||||
>
|
||||
<DownloadIcon className="mr-2" />
|
||||
Download Split PDF
|
||||
</a>
|
||||
)}
|
||||
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user