Membuat Kolom Pilih PDF dengan HTML input type=file

Formulir tugas sering perlu menerima satu berkas PDF. Dengan HTML, Anda bisa memberi nama pada kolom, mengarahkan pemilih file ke PDF, dan mewajibkan pilihan sebelum formulir dikirim. Gunakan berkas contoh tanpa data pribadi untuk latihan ini.

1. Buat kolom pilihan PDF

Simpan contoh sebagai latihan-pilih-pdf.html, lalu buka di browser. Jika baru menyiapkan folder latihan, baca cara memastikan ekstensi HTML tidak tersimpan sebagai TXT.

<!doctype html>
<html lang="id">
<meta charset="utf-8">
<title>Latihan pilih PDF</title>
<h1>Pilih berkas tugas</h1>
<label for="tugas">Berkas tugas (PDF)</label>
<p id="petunjuk">Pilih satu PDF contoh tanpa data pribadi.</p>
<input type="file" id="tugas" name="tugas"
       accept=".pdf,application/pdf" required
       aria-describedby="petunjuk">
<button id="cek" type="button">Cek pilihan</button>
<p id="hasil" role="status"></p>
<script>
const tugas = document.querySelector('#tugas');
const hasil = document.querySelector('#hasil');
document.querySelector('#cek').addEventListener('click', () => {
  hasil.textContent = '';
  if (tugas.reportValidity()) {
    hasil.textContent = 'Berkas dipilih: ' + tugas.files[0].name;
  }
});
</script>
</html>

2. Pahami fungsi tiap atribut

• for="tugas" menghubungkan label dengan id="tugas". Klik label atau gunakan Tab untuk menemukan kolom.
• accept=".pdf,application/pdf" membantu pemilih file menampilkan PDF. Beberapa pemilih masih mengizinkan pengguna menampilkan semua jenis file.
• required memastikan ada berkas yang dipilih. Tombol latihan memanggil reportValidity() agar browser menampilkan pesan saat kolom kosong.
• aria-describedby mengaitkan petunjuk dengan kolom. files[0].name hanya dibaca setelah browser memastikan kolom terisi.

3. Uji dengan tiga kondisi

1. Klik Cek pilihan tanpa memilih berkas. Browser seharusnya meminta Anda memilih file.
2. Pilih PDF contoh, lalu klik tombol lagi. Nama berkas muncul di bawah tombol.
3. Jika dialog pemilih mengizinkan semua jenis file, coba pilih TXT. Apabila file itu lolos, Anda telah melihat batasan filter accept.

Jika formulir benar-benar mengunggah file

Contoh ini hanya membaca nama berkas di browser. Untuk mengirim file ke aplikasi, gunakan formulir method="post" dengan enctype="multipart/form-data" dan rute server yang menerima unggahan. Di server, batasi ukuran dan periksa format dengan parser yang sesuai. Mengganti nama catatan.txt menjadi catatan.pdf tidak mengubah isinya. Untuk melengkapi latihan formulir, pelajari cara mengelompokkan pilihan dengan fieldset dan legend.

Rujukan: MDN – input file dan MDN – atribut accept.