daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multiple file upload functionality

Browse Source 
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
2024-11-05 19:00:11 +07:00
parent 16baa94d2b
commit 43e6573bf2
1 changed files with 89 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/views/debitur/components/dokumen.blade.php
View File

@@ -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, {
@@ -486,14 +493,12 @@
<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 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>
@@ -522,6 +527,40 @@
.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) {