diff --git a/resources/js/business-industries/create.js b/resources/js/business-industries/create.js index d6fa977..4b9517c 100644 --- a/resources/js/business-industries/create.js +++ b/resources/js/business-industries/create.js @@ -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 = - '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(); -// } diff --git a/resources/views/business-industries/create.blade.php b/resources/views/business-industries/create.blade.php index 522af0d..1041ea2 100644 --- a/resources/views/business-industries/create.blade.php +++ b/resources/views/business-industries/create.blade.php @@ -64,7 +64,10 @@