Pernah upload foto profil di Tokopedia atau bukti transfer di bank? Itu pakai <input type="file"> — tag yang munculin tombol "Pilih File" di browser, dipakai user buat ngirim file ke server. Kelihatan simpel, tapi banyak detail kecil yang bikin upload gagal kalau salah setup: salah enctype = file gak terkirim, lupa accept = user bisa upload .exe, lupa validate server-side = security hole.

💡 Frontend HTML cuma "saran" — semua atribut accept/multiple/max size cuma hint ke browser. User bisa bypass DevTools dalam 5 detik. Server-side validation WAJIB: cek MIME type, file size, scan malware. Frontend = UX, backend = security.

Sintaks <input type="file">

<input type="file" name="foto">

Atribut Penting

• accept — batasi jenis file: accept="image/*", accept=".pdf,.doc"
• multiple — izinkan pilih banyak file
• capture — untuk mobile: capture="camera" buka kamera

Contoh Form Upload Lengkap

<!-- Hanya gambar -->
<input type="file" accept="image/*">

<!-- Banyak file -->
<input type="file" multiple>

<!-- Form harus pakai enctype multipart -->
<form enctype="multipart/form-data" method="POST">
  <input type="file" name="dokumen">
  <button type="submit">Upload</button>
</form>

⚠️ Wajib enctype="multipart/form-data". Tanpa ini, file gak terkirim ke server — cuma nama file yang lewat.

🎭 Analogi sehari-hari

Bayangin loket kantor pos. accept="image/*" itu kayak loket khusus dokumen ("cuma terima KTP/SIM, bukan paket"). multiple = boleh kirim beberapa dokumen sekali masuk. enctype="multipart/form-data" = jenis amplop spesial buat ngirim binary file (foto, PDF). Tanpa amplop yang tepat, dokumen kamu kirimnya gak nyampe — server bingung mau baca cara apa.

⚠️ Jebakan yang sering ditemui

• Lupa enctype="multipart/form-data" = file TIDAK terkirim. Form default application/x-www-form-urlencoded cuma untuk text.
• accept="image/*" cuma SARAN browser — user tetap bisa pilih file lain. WAJIB validasi server-side.
• File size default tidak dibatasi HTML — set di server (PHP upload_max_filesize, Node multer).
• Drag-and-drop butuh JS (drop event + preventDefault).
• <input type="file"> tidak bisa di-style banyak — pakai label custom + display: none input.
• capture="environment" mobile = buka kamera belakang, user = depan.
• Security: jangan trust filename, scan file untuk malware di server.

TL;DR: <input type="file"> = upload file. Form WAJIB enctype="multipart/form-data" — tanpa ini file gak terkirim. Atribut: accept="image/*" atau .pdf,.doc (cuma SARAN browser, validasi server tetap WAJIB), multiple (banyak file), capture="camera" (mobile buka kamera). File size limit set di server (upload_max_filesize PHP, multer Node). <input type="file"> susah di-style — pakai trick display: none + label custom. Security: jangan trust filename, scan malware di server.