mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: add pdf-to-image frontend settings component
This commit is contained in:
Siddharth Kumar Sah
@@ -0,0 +1,287 @@
|
|||||||
|
import { Download, FileUp, Loader2, X } from "lucide-react";
|
||||||
|
import { useCallback, useRef, useState } from "react";
|
||||||
|
import { formatHeaders } from "@/lib/api";
|
||||||
|
|
||||||
|
const DPI_OPTIONS = [
|
||||||
|
{ value: 72, label: "72 (Screen)" },
|
||||||
|
{ value: 150, label: "150 (Standard)" },
|
||||||
|
{ value: 300, label: "300 (Print)" },
|
||||||
|
{ value: 600, label: "600 (High Quality)" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const FORMAT_OPTIONS = [
|
||||||
|
{ value: "png", label: "PNG" },
|
||||||
|
{ value: "jpg", label: "JPEG" },
|
||||||
|
{ value: "webp", label: "WebP" },
|
||||||
|
{ value: "avif", label: "AVIF" },
|
||||||
|
{ value: "tiff", label: "TIFF" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function PdfToImageSettings() {
|
||||||
|
const [file, setFile] = useState<File | null>(null);
|
||||||
|
const [pageCount, setPageCount] = useState<number | null>(null);
|
||||||
|
const [format, setFormat] = useState("png");
|
||||||
|
const [dpi, setDpi] = useState(150);
|
||||||
|
const [pages, setPages] = useState("");
|
||||||
|
const [processing, setProcessing] = useState(false);
|
||||||
|
const [loadingInfo, setLoadingInfo] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
|
||||||
|
const [downloadName, setDownloadName] = useState<string>("");
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const fetchPageCount = useCallback(async (pdfFile: File) => {
|
||||||
|
setLoadingInfo(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", pdfFile);
|
||||||
|
const res = await fetch("/api/v1/tools/pdf-to-image/info", {
|
||||||
|
method: "POST",
|
||||||
|
headers: formatHeaders(),
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const body = await res.json().catch(() => ({}));
|
||||||
|
throw new Error(body.error || `Failed: ${res.status}`);
|
||||||
|
}
|
||||||
|
const data = await res.json();
|
||||||
|
setPageCount(data.pageCount);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Failed to read PDF");
|
||||||
|
setFile(null);
|
||||||
|
setPageCount(null);
|
||||||
|
} finally {
|
||||||
|
setLoadingInfo(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleFileChange = useCallback(
|
||||||
|
(files: FileList | null) => {
|
||||||
|
const pdfFile = files?.[0];
|
||||||
|
if (!pdfFile) return;
|
||||||
|
setFile(pdfFile);
|
||||||
|
setPageCount(null);
|
||||||
|
setDownloadUrl(null);
|
||||||
|
setError(null);
|
||||||
|
fetchPageCount(pdfFile);
|
||||||
|
},
|
||||||
|
[fetchPageCount],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleDrop = useCallback(
|
||||||
|
(e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleFileChange(e.dataTransfer.files);
|
||||||
|
},
|
||||||
|
[handleFileChange],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleRemoveFile = useCallback(() => {
|
||||||
|
setFile(null);
|
||||||
|
setPageCount(null);
|
||||||
|
setDownloadUrl(null);
|
||||||
|
setError(null);
|
||||||
|
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getSelectedPageCount = (): number => {
|
||||||
|
if (!pageCount) return 0;
|
||||||
|
const trimmed = pages.trim();
|
||||||
|
if (trimmed === "" || trimmed.toLowerCase() === "all") return pageCount;
|
||||||
|
try {
|
||||||
|
const nums = new Set<number>();
|
||||||
|
for (const seg of trimmed.split(",")) {
|
||||||
|
const s = seg.trim();
|
||||||
|
if (s.includes("-")) {
|
||||||
|
const [a, b] = s.split("-").map((x) => Number(x.trim()));
|
||||||
|
for (let i = a; i <= b; i++) nums.add(i);
|
||||||
|
} else {
|
||||||
|
nums.add(Number(s));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return nums.size;
|
||||||
|
} catch {
|
||||||
|
return pageCount;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleProcess = async () => {
|
||||||
|
if (!file) return;
|
||||||
|
setProcessing(true);
|
||||||
|
setError(null);
|
||||||
|
setDownloadUrl(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
formData.append("settings", JSON.stringify({ format, dpi, pages: pages || "all" }));
|
||||||
|
|
||||||
|
const res = await fetch("/api/v1/tools/pdf-to-image", {
|
||||||
|
method: "POST",
|
||||||
|
headers: formatHeaders(),
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const body = await res.json().catch(() => ({}));
|
||||||
|
throw new Error(body.error || `Conversion failed: ${res.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedCount = getSelectedPageCount();
|
||||||
|
|
||||||
|
if (selectedCount === 1) {
|
||||||
|
const data = await res.json();
|
||||||
|
setDownloadUrl(data.downloadUrl);
|
||||||
|
setDownloadName(`page.${format === "jpg" ? "jpg" : format}`);
|
||||||
|
} else {
|
||||||
|
const blob = await res.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
setDownloadUrl(url);
|
||||||
|
setDownloadName("pdf-pages.zip");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Conversion failed");
|
||||||
|
} finally {
|
||||||
|
setProcessing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedCount = getSelectedPageCount();
|
||||||
|
const isMultiPage = selectedCount > 1;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* PDF upload area */}
|
||||||
|
{!file ? (
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => e.preventDefault()}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
className="border-2 border-dashed border-border rounded-lg p-8 text-center cursor-pointer hover:border-primary/50 transition-colors"
|
||||||
|
>
|
||||||
|
<FileUp className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
|
||||||
|
<p className="text-sm text-muted-foreground">Drop a PDF here or click to select</p>
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept="application/pdf"
|
||||||
|
className="hidden"
|
||||||
|
onChange={(e) => handleFileChange(e.target.files)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2 p-3 rounded-lg bg-muted">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium truncate">{file.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{loadingInfo ? (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Loader2 className="h-3 w-3 animate-spin" />
|
||||||
|
Reading PDF...
|
||||||
|
</span>
|
||||||
|
) : pageCount !== null ? (
|
||||||
|
`${pageCount} page${pageCount !== 1 ? "s" : ""}`
|
||||||
|
) : null}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleRemoveFile}
|
||||||
|
className="p-1 hover:bg-background rounded"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Format dropdown */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="pdf-format" className="text-xs text-muted-foreground">
|
||||||
|
Output Format
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="pdf-format"
|
||||||
|
value={format}
|
||||||
|
onChange={(e) => setFormat(e.target.value)}
|
||||||
|
className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
|
||||||
|
>
|
||||||
|
{FORMAT_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DPI dropdown */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="pdf-dpi" className="text-xs text-muted-foreground">
|
||||||
|
Resolution (DPI)
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="pdf-dpi"
|
||||||
|
value={dpi}
|
||||||
|
onChange={(e) => setDpi(Number(e.target.value))}
|
||||||
|
className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
|
||||||
|
>
|
||||||
|
{DPI_OPTIONS.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Page range input */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="pdf-pages" className="text-xs text-muted-foreground">
|
||||||
|
Pages
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="pdf-pages"
|
||||||
|
type="text"
|
||||||
|
value={pages}
|
||||||
|
onChange={(e) => setPages(e.target.value)}
|
||||||
|
placeholder="All pages"
|
||||||
|
className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground placeholder:text-muted-foreground"
|
||||||
|
/>
|
||||||
|
{pageCount !== null && (
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
e.g. 1-3, 5, 8-10 (document has {pageCount} pages)
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||||
|
|
||||||
|
{/* Convert button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-testid="pdf-to-image-submit"
|
||||||
|
onClick={handleProcess}
|
||||||
|
disabled={!file || !pageCount || processing}
|
||||||
|
className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{processing && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
{processing
|
||||||
|
? "Converting..."
|
||||||
|
: `Convert${pageCount ? ` ${selectedCount} page${selectedCount !== 1 ? "s" : ""}` : ""}`}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Download link */}
|
||||||
|
{downloadUrl && (
|
||||||
|
<a
|
||||||
|
href={downloadUrl}
|
||||||
|
download={downloadName}
|
||||||
|
data-testid="pdf-to-image-download"
|
||||||
|
className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
|
||||||
|
>
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
{isMultiPage ? `Download ZIP (${selectedCount} pages)` : "Download Image"}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user