137 lines
5.4 KiB
JavaScript
137 lines
5.4 KiB
JavaScript
let allFiles = [];
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".file-input").forEach(input => {
|
|
bindFileUpload(input);
|
|
});
|
|
});
|
|
|
|
function bindFileUpload(input) {
|
|
const dropArea = input.closest(".file-drop-area");
|
|
const fileNameBox = dropArea.querySelector(".file-name");
|
|
const inputId = input?.id;
|
|
allFiles[inputId] = [];
|
|
input.addEventListener("change", function () {
|
|
for (let i = 0; i < this.files.length; i++) {
|
|
allFiles[inputId].push(this.files[i]);
|
|
}
|
|
renderFileList(inputId, fileNameBox);
|
|
this.value = ""; // reset agar bisa pilih file lagi
|
|
});
|
|
}
|
|
|
|
function renderFileList(inputId, container) {
|
|
const files = allFiles[inputId];
|
|
if (!files || files.length === 0) {
|
|
container.classList.add("d-none");
|
|
container.innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
let list = "<ul class='list-unstyled mb-0'>";
|
|
files.forEach((file, index) => {
|
|
list += `
|
|
<li class="d-flex justify-content-between align-items-center">
|
|
<span>✔ ${file.name}</span>
|
|
<button type="button" class="btn btn-sm btn-danger ms-2"
|
|
onclick="removeFile('${inputId}', ${index})">✖</button>
|
|
</li>`;
|
|
});
|
|
list += "</ul>";
|
|
|
|
container.innerHTML = list;
|
|
container.classList.remove("d-none");
|
|
}
|
|
|
|
function removeFile(inputId, index) {
|
|
allFiles[inputId].splice(index, 1);
|
|
const container = document.querySelector(`#${inputId}`).closest(".file-drop-area").querySelector(".file-name");
|
|
renderFileList(inputId, container);
|
|
}
|
|
|
|
formCreate.off('submit').on('submit', function(e){
|
|
e.preventDefault();
|
|
const submitBtn = $(this).find('button[type="submit"]');
|
|
submitBtn.prop('disabled', true).text('menyimpan...')
|
|
let hasFile = Object.keys(allFiles).every(id => {
|
|
console.log('fil ' , allFiles[id],' length', allFiles[id].length > 0);
|
|
return Array.isArray(allFiles[id]) && allFiles[id].length > 0;
|
|
});
|
|
if(!hasFile){
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
text: 'Silahkan upload minimal 1 file sebelum submit'
|
|
});
|
|
submitBtn.prop('disabled', false).text('Simpan')
|
|
return;
|
|
}
|
|
const formData = new FormData(this);
|
|
for (const inputId in allFiles) {
|
|
allFiles[inputId].forEach((file, index) => {
|
|
formData.append(`data[${inputId}][file][]`, file); // gunakan inputId = name input file di HTML, misal "files[]"
|
|
});
|
|
}
|
|
fetch(`/upload`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
|
|
},
|
|
body: formData
|
|
}).then(async(res) => {
|
|
const responseData = await res.json();
|
|
if (responseData.status) {
|
|
const handler = function () {
|
|
Toastify({
|
|
text: responseData.message || 'Berhasil melakukan aksi!',
|
|
duration: 3000,
|
|
gravity: "top", // bisa "bottom"
|
|
position: "right", // bisa "left"
|
|
style: {
|
|
background: "linear-gradient(to right, #00b09b, #96c93d)", // hijau gradasi
|
|
color: "#fff",
|
|
}
|
|
}).showToast();
|
|
allFiles = [];
|
|
formCreate.find('input[type="file"].file-input').each(function () {
|
|
const newInput = $(this).clone(); // clone dengan attribute multiple
|
|
$(this).replaceWith(newInput); // ganti input lama dengan baru
|
|
bindFileUpload(newInput[0])
|
|
// console.log(newInput);
|
|
|
|
});
|
|
colCount = 1;
|
|
$("#col_add_file").html('')
|
|
formCreate.find('select').val(null).trigger('change');
|
|
document.querySelectorAll(".file-name").forEach(el => {
|
|
el.classList.add("d-none");
|
|
el.innerHTML = "";
|
|
});
|
|
|
|
if($("#klasifikasi_dok").val().length === 0 || $("#kategori_dok").val().length === 0 ){
|
|
index()
|
|
}else{
|
|
searchData()
|
|
}
|
|
submitBtn.prop('disabled', false).text('Simpan')
|
|
modalCreate.removeEventListener('hidden.bs.modal', handler);
|
|
};
|
|
modalCreate.addEventListener('hidden.bs.modal', handler);
|
|
bootstrap.Modal.getInstance(modalCreate).hide();
|
|
} else {
|
|
throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
|
|
}
|
|
|
|
}).catch(err => {
|
|
if (err.message) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
text: err.message
|
|
});
|
|
submitBtn.prop('disabled', false).text('Simpan...')
|
|
}
|
|
});
|
|
});
|
|
|
|
|