arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix handle disable button when upload business industries

Browse Source
This commit is contained in:
arifal
2025-02-28 10:37:41 +07:00
parent 544ad1db46
commit 4cc698a623
2 changed files with 28 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
resources/js/business-industries/create.js
View File

@@ -5,9 +5,9 @@ Dropzone.autoDiscover = false;
var previewTemplate,
dropzone,
dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
console.log(previewTemplate);
console.log(dropzone);
console.log(dropzonePreviewNode);
const uploadButton = document.getElementById("btnUploadBusinessIndustry");
const spinner = document.getElementById("spinner");
const toastNotification = document.getElementById("toastNotification");
const toast = new bootstrap.Toast(toastNotification);
@@ -29,97 +29,50 @@ const toast = new bootstrap.Toast(toastNotification);
.getAttribute("content")}`,
},
init: function () {
// Listen for the success event
this.on("success", function (file, response) {
console.log("File successfully uploaded:", file);
console.log("API Response:", response);
// Show success toast
document.getElementById("toast-message").innerText =
response.message;
toast.show();
document.getElementById("submit-upload").innerHTML =
"Upload Files";
// Tunggu sebentar lalu reload halaman
setTimeout(() => {
window.location.href = "/data/business-industries";
}, 2000);
});
// Listen for the error event
this.on("error", function (file, errorMessage) {
console.error("Error uploading file:", file);
console.error("Error message:", errorMessage);
// Handle the error response
// Show error toast
document.getElementById("toast-message").innerText =
errorMessage.message;
toast.show();
document.getElementById("submit-upload").innerHTML =
"Upload Files";
uploadButton.disabled = false;
spinner.classList.add("d-none");
});
},
})));
// Add event listener to control the submission manually
document.querySelector("#submit-upload").addEventListener("click", function () {
console.log("Ini adalah value dropzone", dropzone.files[0]);
const formData = new FormData();
console.log("Dropzonefiles", dropzone.files);
document
.querySelector("#btnUploadBusinessIndustry")
.addEventListener("click", function () {
console.log("Ini adalah value dropzone", dropzone.files[0]);
const formData = new FormData();
this.innerHTML =
'<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Loading...';
if (dropzone.files.length > 0) {
formData.append("file", dropzone.files[0]);
dropzone.processQueue(); // Ini akan manual memicu upload
uploadButton.disabled = true;
spinner.classList.remove("d-none");
} else {
document.getElementById("toast-message").innerText =
"Please add a file first.";
toast.show();
uploadButton.disabled = false;
spinner.classList.add("d-none");
}
});
// Pastikan ada file dalam queue sebelum memprosesnya
if (dropzone.files.length > 0) {
formData.append("file", dropzone.files[0]);
console.log("ini adalah form data on submit", ...formData);
dropzone.processQueue(); // Ini akan manual memicu upload
} else {
// Show error toast when no file is selected
document.getElementById("toast-message").innerText =
"Please add a file first.";
toast.show();
document.getElementById("submit-upload").innerHTML = "Upload Files";
}
});
// Optional: Listen for the 'addedfile' event to log or control file add behavior
dropzone.on("addedfile", function (file) {
console.log("File ditambahkan:", file);
console.log("Nama File:", file.name);
console.log("Tipe File:", file.type);
console.log("Ukuran File:", (file.size / 1024).toFixed(2) + " KB");
});
dropzone.on("addedfile", function (file) {});
dropzone.on("complete", function (file) {
dropzone.removeFile(file);
});
// Function to show toast
// function showToast(iconClass, iconColor, message) {
// const toastElement = document.getElementById("toastUploadAdvertisement");
// const toastBody = toastElement.querySelector(".toast-body");
// const toastHeader = toastElement.querySelector(".toast-header");
// // Remove existing icon (if any) before adding the new one
// const existingIcon = toastHeader.querySelector(".bx");
// if (existingIcon) {
// toastHeader.querySelector(".auth-logo").removeChild(existingIcon); // Remove the existing icon
// }
// // Add the new icon to the toast header
// const icon = document.createElement("i");
// icon.classList.add("bx", iconClass);
// icon.style.fontSize = "25px";
// icon.style.color = iconColor;
// toastHeader.querySelector(".auth-logo").appendChild(icon);
// // Set the toast message
// toastBody.textContent = message;
// // Show the toast
// const toast = new bootstrap.Toast(toastElement); // Inisialisasi Bootstrap Toast
// toast.show();
// }

5
resources/views/business-industries/create.blade.php
View File

@@ -64,7 +64,10 @@
<!-- end dropzon-preview -->
</div>
<div class="d-flex justify-content-end">
<button id="submit-upload" class="btn btn-primary">Upload Files</button>
<button type="button" class="btn btn-primary" id="btnUploadBusinessIndustry">
<span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
Upload
</button>
</div>
</div> <!-- end card body -->
</div> <!-- end card -->