upload files

assets/app.js

@@ -0,0 +1,93 @@
+const form = document.getElementById("form");
+const file = document.getElementById("file");
+const nameI = document.getElementById("username");
+const btn = document.getElementById("submit");
+const toasts = document.getElementById("toasts");
+const segSkin = document.getElementById("seg-skin");
+const segCape = document.getElementById("seg-cape");
+
+let kind = "skin";
+
+segSkin.onclick = () => {
+  kind = "skin";
+  segSkin.classList.add("active");
+  segCape.classList.remove("active");
+  segSkin.setAttribute("aria-selected", "true");
+  segCape.setAttribute("aria-selected", "false");
+};
+
+segCape.onclick = () => {
+  kind = "cape";
+  segCape.classList.add("active");
+  segSkin.classList.remove("active");
+  segCape.setAttribute("aria-selected", "true");
+  segSkin.setAttribute("aria-selected", "false");
+};
+
+function toast(msg, type = "ok") {
+  const t = document.createElement("div");
+  t.className = "toast " + type;
+  t.innerHTML =
+    '<div class="dot"></div><div style="line-height:1.35">' +
+    msg +
+    '</div><div class="x" aria-label="Закрити">✕</div>';
+  toasts.appendChild(t);
+  const close = () => {
+    t.style.transition = "opacity .15s ease, transform .15s ease";
+    t.style.opacity = "0";
+    t.style.transform = "translateY(-6px)";
+    setTimeout(() => t.remove(), 180);
+  };
+  t.querySelector(".x").onclick = close;
+  setTimeout(close, 4200);
+}
+
+function validName(v) {
+  return /^[A-Za-z0-9_]{2,16}$/.test(v);
+}
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const v = nameI.value.trim();
+  if (!validName(v)) {
+    toast("Неправильний нік.", "err");
+    return;
+  }
+  if (!file.files?.length) {
+    toast("Оберіть PNG.", "err");
+    return;
+  }
+
+  const fd = new FormData();
+  fd.append("username", v);
+  fd.append("file", file.files[0]);
+
+  const url = kind === "cape" ? "/upload-cape" : "/upload";
+
+  btn.disabled = true;
+  btn.textContent = "Завантаження…";
+  try {
+    const res = await fetch(url, { method: "POST", body: fd });
+    const text = await res.text();
+    let data;
+    try {
+      data = JSON.parse(text);
+    } catch {}
+    if (!res.ok || !data || data.status !== "ok") {
+      toast(data && data.error ? data.error : "Помилка завантаження.", "err");
+    } else {
+      toast(
+        kind === "cape" ? "Готово. Плащ збережено." : "Готово. Скін збережено.",
+        "ok"
+      );
+      form.reset();
+      kind = "skin";
+      segSkin.click();
+    }
+  } catch {
+    toast("Мережа недоступна.", "err");
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Завантажити";
+  }
+});