67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
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";
|
|
}
|
|
}
|
|
}
|