Init project

assets/controllers/image/delete_img_modal_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ["dialog", "form", "token"];
+
+    open(event) {
+        event.preventDefault();
+        const button = event.currentTarget;
+
+        // Récupère l'URL et le token depuis le bouton
+        const url = button.dataset.url;
+        const csrfToken = button.dataset.token;
+
+        // Remplit le formulaire de la modale
+        this.formTarget.action = url;
+        this.tokenTarget.value = csrfToken;
+
+        this.dialogTarget.classList.remove("hidden");
+        this.dialogTarget.classList.add("flex");
+    }
+
+    close() {
+        this.dialogTarget.classList.add("hidden");
+        this.dialogTarget.classList.remove("flex");
+    }
+}

assets/controllers/image/drop_zone_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ["input", "preview", "loader"];
+
+    connect() {
+        this.element.addEventListener("dragover", this.dragOver.bind(this));
+        this.element.addEventListener("dragleave", this.dragLeave.bind(this));
+        this.element.addEventListener("drop", this.drop.bind(this));
+
+        this.inputTarget.addEventListener("change", (event) => {
+            this.handleFiles(this.inputTarget.files);
+        });
+    }
+
+    dragOver(event) {
+        event.preventDefault();
+        this.element.classList.add("border-amber-600");
+    }
+
+    dragLeave(event) {
+        event.preventDefault();
+        this.element.classList.remove("border-amber-600");
+    }
+
+    drop(event) {
+        event.preventDefault();
+        this.element.classList.remove("border-amber-600");
+        this.handleFiles(event.dataTransfer.files);
+    }
+
+    handleFiles(files) {
+        const formData = new FormData();
+        this.previewTarget.innerHTML = "";
+
+        Array.from(files).forEach((file) => {
+            formData.append("file-upload[]", file);
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = document.createElement("img");
+                img.src = e.target.result;
+                img.className = "h-24 w-24 object-cover rounded border";
+                this.previewTarget.appendChild(img);
+            };
+            reader.readAsDataURL(file);
+        });
+
+        this.uploadFiles(formData);
+    }
+
+    async uploadFiles(formData) {
+        this.loaderTarget.style.display = "block";
+
+        try {
+            await fetch("/admin/image/upload", {
+                method: "POST",
+                body: formData,
+            });
+        } catch (err) {
+            console.error("Upload error:", err);
+        } finally {
+            this.loaderTarget.style.display = "none";
+        }
+    }
+}