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 Dokumen Jaminan
</label> </label>
<div class="flex flex-wrap items-baseline w-full"> <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)) @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) }} <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> <i class="ki-filled ki-cloud-download"></i></a>
@@ -444,7 +451,7 @@
<script> <script>
function getLegalitasJaminan() { function getLegalitasJaminan() {
var legalitasJaminan = document.getElementById("jenis_jaminan_id").value; 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 debiturId = "{{ $debitur->id }}";
var url = `/basic-data/jenis-jaminan/legalitas/${documentId}/${legalitasJaminan}`; var url = `/basic-data/jenis-jaminan/legalitas/${documentId}/${legalitasJaminan}`;
fetch(url, { fetch(url, {
@@ -486,14 +493,12 @@
<label class="form-label max-w-56"> <label class="form-label max-w-56">
Dokumen Jaminan Dokumen Jaminan
</label> </label>
<div class="flex flex-wrap items-baseline w-full"> <div class="flex flex-wrap items-baseline w-full" id="file-container-${index}">
<input class="file-input" type="file" name="dokumen_jaminan[]" value=""> ${item.dokumen_jaminan ? renderExistingFiles(item.dokumen_jaminan, debiturId, item.id) : ''}
${item.dokumen_jaminan ? ` <div class="flex items-center gap-2 my-2 w-full">
<a href="/debitur/${debiturId}/jaminan/download?dokumen=${item.id}" class="badge badge-sm badge-outline mt-2"> <input class="file-input" type="file" name="dokumen_jaminan[${index}][]" multiple>
${item.dokumen_jaminan.split('/').pop()} <button type="button" class="btn btn-primary w-[100px] text-center" onclick="addFileInput(${index})">Add File</button>
<i class="ki-filled ki-cloud-download"></i> </div>
</a>
` : ''}
</div> </div>
</div> </div>
@@ -522,6 +527,40 @@
.catch(error => console.error('Error:', error)); .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) { function getCustomFieldInput(type, fieldName, value) {
value = value ? JSON.parse(value)[fieldName] || '' : ''; value = value ? JSON.parse(value)[fieldName] || '' : '';
switch (type) { switch (type) {