ad/molodetz/static/js/components/Upload.js

// retoor <retoor@molodetz.nl>
import { Component } from "./Component.js";

export class Upload extends Component {
  static tag = "dp-upload";

  setup() {
    this.input = document.createElement("input");
    this.input.type = "file";
    this.input.multiple = this.hasAttribute("multiple");
    this.input.accept = this.getAttribute("accept") || "image/*";
    this.input.className = "sr-only";
    const button = document.createElement("button");
    button.type = "button";
    button.className = "button ghost small";
    button.textContent = this.getAttribute("label") || "Bestand kiezen";
    button.addEventListener("click", () => this.input.click());
    this.input.addEventListener("change", () => this.emit("dp-files", { files: [...this.input.files] }));
    this.addEventListener("dragover", (event) => {
      event.preventDefault();
      this.classList.add("dragging");
    });
    this.addEventListener("dragleave", () => this.classList.remove("dragging"));
    this.addEventListener("drop", (event) => {
      event.preventDefault();
      this.classList.remove("dragging");
      this.emit("dp-files", { files: [...event.dataTransfer.files] });
    });
    this.append(this.input, button);
  }
}