완성형 연동 예제›Plain HTML / JavaScript
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

전체 예제

<!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>