warpbox-dev/backend/static/js/app.js

(function () {
  const dropZone = document.querySelector(".drop-zone");
  const fileInput = document.querySelector("#file-input");

  if (!dropZone || !fileInput) {
    return;
  }

  ["dragenter", "dragover"].forEach((eventName) => {
    dropZone.addEventListener(eventName, (event) => {
      event.preventDefault();
      dropZone.classList.add("is-dragging");
    });
  });

  ["dragleave", "drop"].forEach((eventName) => {
    dropZone.addEventListener(eventName, (event) => {
      event.preventDefault();
      dropZone.classList.remove("is-dragging");
    });
  });

  dropZone.addEventListener("drop", (event) => {
    if (event.dataTransfer && event.dataTransfer.files.length > 0) {
      fileInput.files = event.dataTransfer.files;
      updateDropLabel(event.dataTransfer.files.length);
    }
  });

  fileInput.addEventListener("change", () => {
    updateDropLabel(fileInput.files.length);
  });

  function updateDropLabel(count) {
    const title = dropZone.querySelector(".drop-title");
    if (!title) {
      return;
    }

    title.textContent = count === 1 ? "1 file selected" : `${count} files selected`;
  }
})();