84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
import { Dropzone } from "dropzone";
|
|
Dropzone.autoDiscover = false;
|
|
|
|
class UploadSpatialPlannings {
|
|
constructor() {
|
|
this.spatialDropzone = null;
|
|
this.formElement = document.getElementById(
|
|
"formUploadSpatialPlannings"
|
|
);
|
|
this.uploadButton = document.getElementById("submit-upload");
|
|
this.spinner = document.getElementById("spinner");
|
|
if (!this.formElement) {
|
|
console.error(
|
|
"Element formUploadSpatialPlannings tidak ditemukan!"
|
|
);
|
|
}
|
|
}
|
|
|
|
init() {
|
|
this.initDropzone();
|
|
this.setupUploadButton();
|
|
}
|
|
|
|
initDropzone() {
|
|
const toastNotification = document.getElementById("toastNotification");
|
|
const toast = new bootstrap.Toast(toastNotification);
|
|
var previewTemplate,
|
|
dropzonePreviewNode = document.querySelector(
|
|
"#dropzone-preview-list"
|
|
);
|
|
(dropzonePreviewNode.id = ""),
|
|
dropzonePreviewNode &&
|
|
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
|
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
|
(this.spatialDropzone = new Dropzone(".dropzone", {
|
|
url: this.formElement.action,
|
|
method: "post",
|
|
acceptedFiles: ".xls,.xlsx",
|
|
previewTemplate: previewTemplate,
|
|
previewsContainer: "#dropzone-preview",
|
|
autoProcessQueue: false,
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
},
|
|
init: function () {
|
|
this.on("success", function (file, response) {
|
|
document.getElementById("toast-message").innerText =
|
|
response.message;
|
|
toast.show();
|
|
setTimeout(() => {
|
|
window.location.href =
|
|
"/data/spatial-plannings";
|
|
}, 2000);
|
|
});
|
|
this.on("error", function (file, errorMessage) {
|
|
document.getElementById("toast-message").innerText =
|
|
errorMessage.message;
|
|
toast.show();
|
|
this.uploadButton.disabled = false;
|
|
this.spinner.classList.add("d-none");
|
|
});
|
|
},
|
|
})));
|
|
}
|
|
|
|
setupUploadButton() {
|
|
this.uploadButton.addEventListener("click", (e) => {
|
|
if (this.spatialDropzone.files.length > 0) {
|
|
this.spatialDropzone.processQueue();
|
|
this.uploadButton.disabled = true;
|
|
this.spinner.classList.remove("d-none");
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new UploadSpatialPlannings().init();
|
|
});
|