32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
// 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") || "Choose file";
|
|
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);
|
|
}
|
|
}
|