theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: only one button for convert and download with smooth loading animation

Browse source
This commit is contained in:
theoleuthardt 2025-02-13 01:39:03 +01:00
parent 69b572bf74
commit 7b584d2fff
2 changed files with 24 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/app/doc-to-pdf/page.tsx
View file

@ -9,11 +9,12 @@ import Link from "next/link";
export default function Home() { export default function Home() {
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [downloadUrl, setDownloadUrl] = useState<string>(""); const [downloadUrl, setDownloadUrl] = useState<string>("");
const [showDownload, setShowDownload] = useState(false); const [loading, setLoading] = useState(false);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) { if (event.target.files && event.target.files.length > 0) {
setFile(event.target.files[0]); setFile(event.target.files[0]);
setDownloadUrl("");
} }
}; };
@ -26,6 +27,8 @@ export default function Home() {
const formData = new FormData(); const formData = new FormData();
formData.append("file", file); formData.append("file", file);
setLoading(true);
try { try {
const response = await fetch("/api/libre-convert", { const response = await fetch("/api/libre-convert", {
method: "POST", method: "POST",
@ -39,10 +42,11 @@ export default function Home() {
const blob = await response.blob(); const blob = await response.blob();
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
setDownloadUrl(url); setDownloadUrl(url);
setShowDownload(true);
} catch (error) { } catch (error) {
console.error("Error while converting:", error); console.error("Error while converting:", error);
alert("Error while converting"); alert("Error while converting");
} finally {
setLoading(false);
} }
}; };
@ -64,10 +68,22 @@ export default function Home() {
onChange={handleFileChange} onChange={handleFileChange}
/> />
<div className={"flex flex-row items-center gap-4 mt-4"}> <div className={"flex flex-row items-center gap-4 mt-4"}>
<Button content="convert" onClick={convertToPdf} /> {downloadUrl ? (
<Link id="downloadPDF" href={downloadUrl}> <Link id="downloadPDF" href={downloadUrl}>
<Button content="download" visible={showDownload} /> <Button content="download" />
</Link> </Link>
) : (
<Button
content={
loading ? (
<div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
) : (
"convert"
)
}
onClick={convertToPdf}
/>
)}
</div> </div>
</div> </div>
<Footer /> <Footer />

4
src/components/Button.tsx
View file

@ -1,8 +1,8 @@
import React from "react"; import React, { JSX } from "react";
interface ButtonProps { interface ButtonProps {
className?: string; className?: string;
content: string; content: string | JSX.Element;
onClick?: () => void; onClick?: () => void;
visible?: boolean; visible?: boolean;
} }