Tambahkan fitur unggah file revisi

Menambahkan elemen input untuk unggah file revisi pada halaman otorisasi permohonan serta validasi pada berkas unggahan. Apabila tidak ada berkas yang diunggah, akan muncul pesan kesalahan yang meminta pengguna untuk mengunggah berkas revisi. Juga ditambahkan event listener untuk menghilangkan pesan kesalahan setelah berkas diunggah.
This commit is contained in:
Daeng Deni Mardaeni
2024-11-08 15:00:49 +07:00
parent 5adb00f04c
commit 70344ff310

View File

@@ -170,6 +170,15 @@
<em class="alert text-danger text-sm" id="keterangan-message"></em>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mt-2" id="fileUploadSection">
<label class="form-label max-w-56">
Upload File Revisi
</label>
<div class="flex flex-wrap items-baseline w-full">
<input type="file" class="file-input" id="revisionFile" name="revisionFile">
<em class="alert text-danger text-sm hidden" id="file-message"></em>
</div>
</div>
</div>
<div class="card-footer flex justify-end">
<button type="submit" name="status" value="preregister" class="btn btn-success">
@@ -192,6 +201,10 @@
const revisiBtn = document.getElementById('revisi');
const keteranganMessage = document.getElementById('keterangan-message');
const revisionFile = document.getElementById('revisionFile');
const fileMessage = document.getElementById('file-message');
form.addEventListener('submit', function(event) {
if (event.submitter === revisiBtn && keterangan.value.trim() === '') {
event.preventDefault();
@@ -199,12 +212,25 @@
} else {
keteranganMessage.textContent = '';
}
if (!revisionFile.files.length) {
event.preventDefault();
fileMessage.textContent = 'File revisi harus diunggah.';
fileMessage.classList.remove('hidden');
} else {
fileMessage.classList.add('hidden');
}
});
// Add event listener for typing in keterangan textarea
keterangan.addEventListener('input', function() {
keteranganMessage.classList.add('hidden');
});
// Add event listener for file selection
revisionFile.addEventListener('change', function() {
fileMessage.classList.add('hidden');
});
});
</script>
@endpush