Molodetz blogrol volgens DPP-template

2026-10-05 09:36:20 +02:00
commit f290a4c766
277 changed files with 15758 additions and 0 deletions
@@ -0,0 +1,31 @@
+// 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);
+  }
+}