Plain HTML / JavaScript
Multi-result + Server Upload
Complete multi-result FormData upload example.
1. SaveCopy as index.html
2. KeyReplace pk_live_xxxxx
3. ServeRun from an authorized origin
Complete example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Zavilo SDK Example</title>
<script src="https://sdk.zavilo.app/v1/zavilo.js"></script>
</head>
<body>
<h1>PDF to JPG + Upload</h1>
<input id="file" type="file" accept="application/pdf">
<button id="runButton" type="button">Convert and Upload</button>
<p id="status"></p>
<script>
let client;
async function init() {
client = await Zavilo.init({
publicKey: "pk_live_xxxxx"
});
}
async function convertAndUpload() {
const pdfFile = document.getElementById("file").files[0];
if (!pdfFile) return;
const result = await client.run("pdf-to-jpg", {
file: pdfFile,
output: {
filePrefix: "page",
archive: true,
archiveName: "converted-pages"
}
});
const form = new FormData();
for (const file of result.files) {
form.append("files", file, file.name);
}
form.append("executionId", result.executionId);
const response = await fetch("/api/upload-pages", {
method: "POST",
body: form
});
if (!response.ok) {
throw new Error("Upload failed: " + response.status);
}
document.getElementById("status").textContent =
"Uploaded " + result.files.length + " files";
}
document.getElementById("runButton")
.addEventListener("click", function () {
convertAndUpload().catch(function (error) {
document.getElementById("status").textContent =
error.code || error.message || String(error);
});
});
init();
</script>
</body>
</html>