Add multiple file upload functionality
Enhanced the document upload section to support multiple file uploads for "Dokumen Jaminan". Added "Add More" and "Remove" buttons for dynamically managing file inputs. Implemented helper functions to handle dynamic input fields and update the UI accordingly.
This commit is contained in:
Daeng Deni Mardaeni
@@ -158,7 +158,14 @@
|
||||
Dokumen Jaminan
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input class="file-input" type="file" name="dokumen_jaminan[]" value="">
|
||||
<div class="flex flex-col w-full gap-2" id="file-container-{{$n}}">
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="file-input" type="file" name="dokumen_jaminan[{{ $n }}][]" multiple>
|
||||
<button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput({{ $n }})">Add More</button>
|
||||
</div>
|
||||
<div id="additional-files-{{ $n }}"></div>
|
||||
</div>
|
||||
|
||||
@if(isset($detail->dokumen_jaminan))
|
||||
<a href="{{ route('debitur.jaminan.download',['id'=>$debitur->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
|
||||
<i class="ki-filled ki-cloud-download"></i></a>
|
||||
@@ -444,7 +451,7 @@
|
||||
<script>
|
||||
function getLegalitasJaminan() {
|
||||
var legalitasJaminan = document.getElementById("jenis_jaminan_id").value;
|
||||
var documentId = "{{ $document->id ?? "0" }}"; // Assuming you have access to the debitur ID in your Blade template
|
||||
var documentId = "{{ $document->id ?? "0" }}";
|
||||
var debiturId = "{{ $debitur->id }}";
|
||||
var url = `/basic-data/jenis-jaminan/legalitas/${documentId}/${legalitasJaminan}`;
|
||||
fetch(url, {
|
||||
@@ -465,63 +472,95 @@
|
||||
doctainer.innerHTML = "";
|
||||
data.forEach((item, index) => {
|
||||
doctainer.innerHTML += `
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56 font-bold">
|
||||
${index + 1}. ${item.name}
|
||||
</label>
|
||||
<input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
|
||||
${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
|
||||
</div>
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56 font-bold">
|
||||
${index + 1}. ${item.name}
|
||||
</label>
|
||||
<input type="hidden" name="jenis_legalitas_jaminan_id[]" value="${item.jenis_legalitas_jaminan_id}">
|
||||
${item.is_existing ? `<input type="hidden" name="detail_dokumen_jaminan_id[]" value="${item.id}">` : ''}
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Nama Dokumen
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Nama Dokumen
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input class="input" type="text" name="name[]" value="${item.name || ''}" placeholder="Nama Dokumen">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Dokumen Jaminan
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<input class="file-input" type="file" name="dokumen_jaminan[]" value="">
|
||||
${item.dokumen_jaminan ? `
|
||||
<a href="/debitur/${debiturId}/jaminan/download?dokumen=${item.id}" class="badge badge-sm badge-outline mt-2">
|
||||
${item.dokumen_jaminan.split('/').pop()}
|
||||
<i class="ki-filled ki-cloud-download"></i>
|
||||
</a>
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Dokumen Jaminan
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full" id="file-container-${index}">
|
||||
${item.dokumen_jaminan ? renderExistingFiles(item.dokumen_jaminan, debiturId, item.id) : ''}
|
||||
<div class="flex items-center gap-2 my-2 w-full">
|
||||
<input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
|
||||
<button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput(${index})">Add File</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${item.custom_field ? `
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56 capitalize">
|
||||
${item.custom_field.replace(/_/g, " ")}
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${item.custom_field ? `
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56 capitalize">
|
||||
${item.custom_field.replace(/_/g, " ")}
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
${getCustomFieldInput(item.custom_field_type, item.custom_field, item.details)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Keterangan
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label class="form-label max-w-56">
|
||||
Keterangan
|
||||
</label>
|
||||
<div class="flex flex-wrap items-baseline w-full">
|
||||
<textarea class="textarea" rows="3" name="keterangan[]">${item.keterangan || ''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
}
|
||||
|
||||
function addFileInput(index) {
|
||||
const container = document.getElementById(`file-container-${index}`);
|
||||
const newInput = document.createElement('div');
|
||||
newInput.className = 'flex items-center gap-2 mb-2 w-full';
|
||||
newInput.innerHTML = `
|
||||
<input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
|
||||
<button type="button" class="btn btn-danger w-[100px] text-center" onclick="removeFileInput(this)">Remove</button>
|
||||
`;
|
||||
container.appendChild(newInput);
|
||||
}
|
||||
|
||||
function removeFileInput(button) {
|
||||
button.closest('.flex.items-center.gap-2.mb-2').remove();
|
||||
}
|
||||
|
||||
function renderExistingFiles(dokumenJaminan, debiturId, itemId) {
|
||||
if (typeof dokumenJaminan === 'string') {
|
||||
return `
|
||||
<a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}" class="badge badge-sm badge-outline mt-2">
|
||||
${dokumenJaminan.split('/').pop()}
|
||||
<i class="ki-filled ki-cloud-download"></i>
|
||||
</a>
|
||||
`;
|
||||
} else if (Array.isArray(dokumenJaminan)) {
|
||||
return dokumenJaminan.map(file => `
|
||||
<a href="/debitur/${debiturId}/jaminan/download?dokumen=${itemId}&file=${file}" class="badge badge-sm badge-outline mt-2 mr-2">
|
||||
${file.split('/').pop()}
|
||||
<i class="ki-filled ki-cloud-download"></i>
|
||||
</a>
|
||||
`).join('');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function getCustomFieldInput(type, fieldName, value) {
|
||||
value = value ? JSON.parse(value)[fieldName] || '' : '';
|
||||
switch (type) {
|
||||
|
||||
Reference in New Issue
Block a user