Profil pengguna hampir selalu menyertakan foto, dan dokumen resmi sering diminta sebagai lampiran berkas. Untuk kebutuhan itu, HTML menyediakan <input type="file">: kontrol yang membuka dialog pemilih berkas milik sistem operasi ketika ditekan. Berkas yang dipilih tidak dikirim seperti teks biasa, karena pengirimannya memerlukan pengaturan khusus pada form. Pada Chapter ini kita membahas atribut accept, multiple, dan capture, menyiapkan form untuk unggahan, lalu menutup dengan catatan keamanan yang menyertainya.

Dasar Input File #

<input type="file"> dirender browser sebagai tombol berlabel “Pilih berkas” atau serupa, disertai teks nama berkas yang terpilih. Nilai kontrol ini bukan isi berkasnya, melainkan daftar berkas yang dipilih; pembacaan isi berkas terjadi di server setelah data tiba. Seperti kontrol lain, input file membutuhkan atribut name agar datanya terkirim, serta label yang terhubung lewat for dan id agar aksesibel.

Membatasi Jenis Berkas dengan Accept #

Atribut accept memfilter berkas yang ditampilkan oleh dialog pemilih. Nilainya berupa daftar spesifikasi yang dipisah koma, dapat berupa ekstensi seperti .pdf dan .jpg, tipe MIME seperti image/png, atau kategori seperti image/*, audio/*, dan video/*. Contoh accept=".pdf,.jpg,image/*" menampilkan berkas PDF, JPG, dan gambar apa pun pada dialog. Perlu digarisbawahi bahwa accept hanyalah petunjuk untuk dialog pemilih, bukan pemeriksaan yang menjamin jenis data yang terkirim.

Memilih Banyak Berkas dan Kamera #

Atribut boolean multiple mengizinkan pengunjung memilih lebih dari satu berkas sekaligus, misalnya dengan menahan Ctrl atau Shift saat memilih. Tanpa atribut tersebut, dialog hanya menerima satu berkas. Untuk perangkat bergerak, atribut capture dengan nilai user atau environment meminta browser membuka kamera depan atau belakang alih-alih galeri; pada browser desktop, atribut ini umumnya diabaikan.

Menyiapkan Form untuk Unggahan #

Data berkas berukuran besar dan berformat biner tidak muat dalam skema pengiriman teks biasa. Karena itu form yang mengunggah berkas wajib memakai enctype="multipart/form-data", yaitu format pengiriman yang membungkus tiap berkas sebagai bagian terpisah. Tanpa pengaturan ini, yang sampai di server hanya nama berkasnya, bukan isinya. Atribut enctype beserta seluruh nilainya kita bedah lebih rinci pada Chapter Form Action dan Method.

Validasi Berkas Dilakukan di Server #

Filter accept dapat dilewati: pengunjung dapat memilih opsi “Semua berkas” pada dialog, atau mengirim permintaan langsung tanpa browser sama sekali. Karena itu pemeriksaan yang menentukan adalah pemeriksaan di server, meliputi jenis berkas yang sebenarnya, ukurannya, dan isinya. Nama berkas yang dikirim pengunjung juga tidak boleh dipakai mentah-mentah; nama itu dapat mengandung karakter yang merusak penyimpanan server. Anggaplah seluruh data dari sisi klien sebagai masukan yang perlu diverifikasi ulang.

Contoh: Unggah Foto Profil #

File berikut memuat form profil dengan dua input file: satu untuk foto dengan filter gambar, satu untuk lampiran PDF yang boleh lebih dari satu. Simpan sebagai contoh-file-input.html lalu buka di browser:

html contoh-file-input.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unggah Foto Profil</title>
</head>
<body>
  <h1>Lengkapi Profil</h1>
  <form action="www.example.com/profil/unggah" method="post" enctype="multipart/form-data">
    <p>
      <label for="foto">Foto profil (PNG atau JPG)</label><br>
      <input type="file" id="foto" name="foto" accept="image/png, image/jpeg">
    </p>
    <p>
      <label for="lampiran">Lampiran sertifikat (boleh lebih dari satu)</label><br>
      <input type="file" id="lampiran" name="lampiran" accept=".pdf" multiple>
    </p>
    <p><button type="submit">Unggah</button></p>
  </form>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Tombol "Unggah" di bawah dua kontrol pemilih berkas
  - Kontrol pertama hanya menampilkan gambar PNG dan JPG pada dialog pemilih
  - Kontrol kedua hanya menampilkan berkas PDF dan mengizinkan pemilihan
    banyak berkas sekaligus

Mari kita telaah peran setiap baris pentingnya:

  1. Baris 10 (<form ...>): enctype="multipart/form-data" wajib ada agar isi berkas ikut terkirim, bukan hanya namanya.
  2. Baris 13 (input foto): accept="image/png, image/jpeg" memfilter dialog pemilih sehingga hanya gambar PNG dan JPG yang tampil.
  3. Baris 17 (input lampiran): accept=".pdf" membatasi ke berkas PDF, sedangkan multiple mengizinkan pemilihan beberapa berkas sekaligus.
  4. Baris 19 (button): tombol submit yang mengirim seluruh berkas terpilih ke tujuan form.

Form yang mampu mengunggah berkas menambah jenis data yang bisa kita kumpulkan. Selanjutnya kita mengenal kontrol yang sering terasa sulit tanpa bantuan browser: pemilihan tanggal dan waktu.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-file-input.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unggah Foto Profil</title>
</head>
<body>
  <h1>Lengkapi Profil</h1>
  <form action="www.example.com/profil/unggah" method="post" enctype="multipart/form-data">
    <p>
      <label for="foto">Foto profil (PNG atau JPG)</label><br>
      <input type="file" id="foto" name="foto" accept="image/png, image/jpeg">
    </p>
    <p>
      <label for="lampiran">Lampiran sertifikat (boleh lebih dari satu)</label><br>
      <input type="file" id="lampiran" name="lampiran" accept=".pdf" multiple>
    </p>
    <p><button type="submit">Unggah</button></p>
  </form>
</body>
</html>