Input File: Upload Berkas

Kenapa Upload Butuh Perlakuan Khusus

Bayangkan loket pengumpulan tugas. Kalau yang dikumpulkan hanya biodata, cukup tulis di formulir. Tapi kalau yang dikumpulkan adalah makalah cetak, kamu butuh amplop: formulir biasa tidak bisa menampung kertas. Form HTML punya keterbatasan yang sama. Secara default, form mengirim data sebagai teks biasa (nama=Andi&kota=Bandung), dan teks tidak bisa mewakili isi sebuah file foto. Itulah kenapa upload file butuh trio khusus: type="file" untuk memilih berkas, method="post" karena datanya besar dan tidak boleh nongol di URL, serta enctype="multipart/form-data" yang mengubah cara browser mengemas kiriman menjadi format yang bisa membawa data biner. Tanpa ketiganya bersamaan, file tidak akan pernah sampai ke server.

Contoh 1: Upload Foto Profil Sederhana

<form action="/upload" method="post" enctype="multipart/form-data">
  <p>Foto profil: <input type="file" name="foto" accept="image/*" /></p>
  <button type="submit">Upload</button>
</form>

Perhatikan enctype="multipart/form-data" pada tag form: inilah yang paling sering dilupakan dan menjadi penyebab klasik "kok file-nya tidak terkirim?". Atribut accept="image/*" memfilter dialog pilih file agar hanya menampilkan gambar, sekaligus memberi opsi ambil foto langsung dari kamera di HP.

Contoh 2: Form Lamaran Kerja yang Lebih Lengkap

<form action="/lamar" method="post" enctype="multipart/form-data">
  <p>Nama: <input type="text" name="nama" /></p>
  <p>CV (PDF): <input type="file" name="cv" accept=".pdf" /></p>
  <p>Foto: <input type="file" name="foto" accept="image/*" capture="environment" /></p>
  <p>Portofolio (boleh banyak): <input type="file" name="portofolio" multiple /></p>
  <button type="submit">Kirim Lamaran</button>
</form>

Tiga variasi di sini: accept=".pdf" membatasi ke ekstensi tertentu, capture="environment" di HP langsung membuka kamera belakang tanpa lewat galeri, dan multiple mengizinkan pengguna memilih banyak file sekaligus dalam satu input. Form file dan input teks biasa bisa hidup berdampingan dalam satu form tanpa masalah.

Kesalahan Umum

1. Lupa enctype. Trio wajibnya adalah type="file" + method="post" + enctype="multipart/form-data". Hilang satu saja, file tidak terkirim dan server hanya menerima nama file kosong.

<!-- SALAH: file tidak akan terkirim -->
<form action="/upload" method="post">
  <input type="file" name="foto" />
</form>

<!-- BENAR: enctype yang tepat -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="foto" />
</form>

2. Menganggap accept sebagai keamanan. Atribut accept hanya saran untuk dialog pilih file, bukan penjaga. Siapa pun bisa mengakali dan mengunggah file berbahaya. Server wajib memvalidasi ulang tipe file (periksa isi aslinya, bukan cuma ekstensi) dan membatasi ukuran maksimal.

3. Upload pakai GET. Data file tidak muat di URL dan tidak boleh terlihat di sana. Upload selalu memakai POST.

Catatan teknis: Jangan pernah menyimpan file upload dengan nama asli dari pengguna langsung di server. Nama file bisa berisi karakter aneh atau menimpa file lain. Praktik amannya: buat nama acak yang unik, simpan nama aslinya di database kalau perlu ditampilkan.