106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const dropzones = document.querySelectorAll("[data-import-dropzone]");
|
|
const uploadButtons = document.querySelectorAll(
|
|
"[data-import-upload-trigger]"
|
|
);
|
|
const resetButtons = document.querySelectorAll("[data-import-reset]");
|
|
const feedbackEl = document.querySelector("#import-upload-feedback");
|
|
|
|
function showFeedback(message, type = "info") {
|
|
if (!feedbackEl) return;
|
|
feedbackEl.textContent = message;
|
|
feedbackEl.classList.remove("hidden", "success", "error", "info");
|
|
feedbackEl.classList.add(type);
|
|
}
|
|
|
|
function hideFeedback() {
|
|
if (!feedbackEl) return;
|
|
feedbackEl.textContent = "";
|
|
feedbackEl.classList.add("hidden");
|
|
}
|
|
|
|
dropzones.forEach((zone) => {
|
|
const input = zone.querySelector("input[type='file']");
|
|
const uploadButton = zone
|
|
.closest("[data-import-upload]")
|
|
.querySelector("[data-import-upload-trigger]");
|
|
const resetButton = zone
|
|
.closest("[data-import-upload]")
|
|
.querySelector("[data-import-reset]");
|
|
|
|
function enableUpload() {
|
|
if (uploadButton) {
|
|
uploadButton.disabled = false;
|
|
}
|
|
if (resetButton) {
|
|
resetButton.hidden = false;
|
|
}
|
|
}
|
|
|
|
function disableUpload() {
|
|
if (uploadButton) {
|
|
uploadButton.disabled = true;
|
|
}
|
|
if (resetButton) {
|
|
resetButton.hidden = true;
|
|
}
|
|
}
|
|
|
|
zone.addEventListener("dragover", (event) => {
|
|
event.preventDefault();
|
|
zone.classList.add("dragover");
|
|
});
|
|
|
|
zone.addEventListener("dragleave", () => {
|
|
zone.classList.remove("dragover");
|
|
});
|
|
|
|
zone.addEventListener("drop", (event) => {
|
|
event.preventDefault();
|
|
zone.classList.remove("dragover");
|
|
if (!event.dataTransfer?.files?.length) {
|
|
return;
|
|
}
|
|
input.files = event.dataTransfer.files;
|
|
enableUpload();
|
|
hideFeedback();
|
|
});
|
|
|
|
input.addEventListener("change", () => {
|
|
if (input.files?.length) {
|
|
enableUpload();
|
|
hideFeedback();
|
|
} else {
|
|
disableUpload();
|
|
}
|
|
});
|
|
|
|
resetButton?.addEventListener("click", () => {
|
|
input.value = "";
|
|
disableUpload();
|
|
hideFeedback();
|
|
});
|
|
|
|
uploadButton?.addEventListener("click", () => {
|
|
if (!input.files?.length) {
|
|
showFeedback(
|
|
"Please select a CSV or XLSX file before uploading.",
|
|
"error"
|
|
);
|
|
return;
|
|
}
|
|
|
|
showFeedback("Uploading…", "info");
|
|
uploadButton.disabled = true;
|
|
uploadButton.classList.add("loading");
|
|
|
|
// Actual upload logic handled separately (e.g., fetch).
|
|
NotificationCenter?.show({
|
|
message: "Upload started…",
|
|
level: "info",
|
|
timeout: 2000,
|
|
});
|
|
});
|
|
});
|
|
});
|