Multiple File Control

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>Merge PDF</h1>

  <input id="files" type="file" accept="application/pdf" multiple>
  <button id="mergeButton" type="button">Merge PDF</button>
  <p id="status"></p>

  <script>
    let client;

    async function init() {
      client = await Zavilo.init({
        publicKey: "pk_live_xxxxx"
      });
      document.getElementById("status").textContent = "Ready";
    }

    async function mergePdf() {
      const files = Array.from(
        document.getElementById("files").files
      );

      if (files.length < 2) {
        alert("Choose at least two PDF files.");
        return;
      }

      const result = await client.run("merge-pdf", {
        files: files
      });

      const merged = result.files[0];
      const url = URL.createObjectURL(merged);
      const a = document.createElement("a");
      a.href = url;
      a.download = merged.name;
      a.click();

      setTimeout(function () {
        URL.revokeObjectURL(url);
      }, 1000);
    }

    document.getElementById("mergeButton")
      .addEventListener("click", mergePdf);

    init();
  </script>
</body>
</html>