trpic/web/scripts/upload/upload.js

document.addEventListener("DOMContentLoaded", () => {
  let infoBox = document.getElementById("info-box");
  // 阻止默认行为
  ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
    infoBox.addEventListener(eventName, (e) => e.preventDefault());
  });

  // 拖入高亮
  ["dragenter", "dragover"].forEach((eventName) => {
    infoBox.addEventListener(eventName, () => {
      infoBox.style.backgroundColor = "rgb(50, 50, 50)";
    });
  });

  // 拖出取消高亮
  ["dragleave", "drop"].forEach((eventName) => {
    infoBox.addEventListener(eventName, () => {
      infoBox.style.backgroundColor = "rgb(30, 30, 30)";
    });
  });

  // 处理文件
  infoBox.addEventListener("drop", (e) => {
    const files = e.dataTransfer.files;
    if (files.length === 0) return;
    let token = localStorage.getItem("upload_token");

    if (!token) {
      token = prompt("Input token:");
      if (!token) return;
    }

    for (const file of files) {
      uploadFile(file, token);
    }
  });

  function uploadFile(file, token) {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("token", token);

    fetch("api/files", {
      method: "POST",
      body: formData,
    })
      .then((response) => {
        if (response.ok) {
          infoBox.style.backgroundColor = "rgb(100, 130, 105)";
          setTimeout(() => {
            infoBox.style.backgroundColor = "rgb(30, 30, 30)";
            resetGallery();
          }, 1000);
          localStorage.setItem("upload_token", token);
        } else {
          response.text().then((text) => {
            alert(`Upload failed: ${text}`);
            if (response.status === 401) localStorage.removeItem("upload_token");
          });
        }
      })
      .catch((err) => {
        console.error(err);
        alert(`Upload failed: ${err}`);
      });
  }
});