Astro
Usa un endpoint del servidor para que la API key no llegue al navegador.Endpoint básico
// src/pages/api/convert.ts
import type { APIRoute } from "astro";
const API_URL = import.meta.env.FLASH_MD_API_URL;
const API_KEY = import.meta.env.FLASH_MD_API_KEY;
async function pollJob(jobId: string): Promise<string> {
while (true) {
await new Promise((r) => setTimeout(r, 5000));
const res = await fetch(`${API_URL}/jobs/${jobId}`, {
headers: { "x-api-key": API_KEY },
});
const data = await res.json();
if (data.status === "completed") return data.body;
if (data.status === "failed") throw new Error(data.error);
}
}
export const POST: APIRoute = async ({ request }) => {
const form = await request.formData();
const file = form.get("file") as File | null;
if (!file) {
return new Response(JSON.stringify({ error: "Missing file" }), { status: 400 });
}
const res = await fetch(
`${API_URL}/convert/raw?filename=${encodeURIComponent(file.name)}&mode=fast`,
{
method: "POST",
headers: {
"x-api-key": API_KEY,
"content-type": file.type || "application/octet-stream",
},
body: file,
}
);
if (res.status === 200) {
return new Response(await res.text(), {
headers: { "content-type": "text/markdown; charset=utf-8" },
});
}
if (res.status === 202) {
const job = await res.json();
const markdown = await pollJob(job.job_id);
return new Response(markdown, {
headers: { "content-type": "text/markdown; charset=utf-8" },
});
}
return new Response(await res.text(), { status: res.status });
};
Formulario en el cliente
---
// src/pages/upload.astro
---
<form id="form">
<input type="file" name="file" accept=".pdf,.docx,.csv,.xlsx,.pptx,.txt" required />
<button type="submit">Convertir</button>
</form>
<pre id="output"></pre>
<script>
const form = document.querySelector("form")!;
const output = document.getElementById("output")!;
form.addEventListener("submit", async (e) => {
e.preventDefault();
output.textContent = "Convirtiendo...";
const data = new FormData(form);
const res = await fetch("/api/convert", { method: "POST", body: data });
output.textContent = await res.text();
});
</script>
Necesitas
output: "server" o output: "hybrid" en astro.config.mjs para que los endpoints del servidor funcionen.