File upload

import { html, mount, createState, onCleanup } from "@zoijs/core";

function upload(file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload");
    xhr.upload.addEventListener("progress", (e) => {
      if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100));
    });
    xhr.addEventListener("load", () =>
      xhr.status < 400 ? resolve(JSON.parse(xhr.responseText)) : reject(new Error(`HTTP ${xhr.status}`))
    );
    xhr.addEventListener("error", () => reject(new Error("Network error")));
    const body = new FormData();
    body.append("file", file);
    xhr.send(body);
  });
}

function Uploader() {
  const file = createState(null);
  const previewUrl = createState("");
  const progress = createState(0);
  const status = createState("idle"); // idle | uploading | done | error

  // Object URLs must be revoked or they leak memory.
  const setPreview = (url) => {
    const old = previewUrl.peek();
    if (old) URL.revokeObjectURL(old);
    previewUrl.set(url);
  };
  onCleanup(() => setPreview(""));

  const onPick = (e) => {
    const f = e.target.files[0] || null;
    file.set(f);
    status.set("idle");
    progress.set(0);
    setPreview(f && f.type.startsWith("image/") ? URL.createObjectURL(f) : "");
  };

  const start = async () => {
    const f = file.get();
    if (!f) return;
    status.set("uploading");
    try {
      await upload(f, (pct) => progress.set(pct));
      status.set("done");
    } catch {
      status.set("error");
    }
  };

  return html`
    <section>
      <input type="file" accept="image/*" onchange=${onPick} />

      ${() => previewUrl.get() && html`<img src=${() => previewUrl.get()} alt="Preview" style="max-width:200px" />`}

      <button onclick=${start} disabled=${() => !file.get() || status.get() === "uploading"}>
        Upload
      </button>

      ${() =>
        status.get() === "uploading" &&
        html`<progress value=${() => progress.get()} max="100">${() => progress.get()}%</progress>`}

      ${() => status.get() === "done" && html`<p>✓ Uploaded.</p>`}
      ${() => status.get() === "error" && html`<p class="error">Upload failed.</p>`}
    </section>
  `;
}

mount(Uploader, "#app");