Cara Implementasi Upload Gambar dengan Preview di Laravel & JS

Pendahuluan

Bayangin lagi ngerjain fitur profil user, tapi user terus-terusan komplen karena mereka nggak tahu gambar apa yang baru aja mereka pilih sebelum di-submit. Rasanya tuh kayak naruh barang di kotak tertutup, kita nggak tahu isinya bener atau nggak sampai beneran dikirim ke server. Laravel emang jago urusan back-end, tapi buat urusan UX kayak preview gambar, kita perlu kolaborasi manis sama JavaScript biar user nggak harus nunggu loading request cuma buat tahu fotonya salah upload.

Tips & Best Practices

• Di banyak project, biasanya saya selalu ngecek ukuran file lewat client-side dulu sebelum preview biar browser nggak 'sesak' ngerender file 20MB ke atas.
• Selalu gunakan URL.createObjectURL() buat bikin temporary link; ini teknik paling enteng karena kita nggak perlu nge-upload dulu ke server buat sekadar nampilin preview-nya.
• Biasanya saya nambahin tombol 'Hapus' atau 'Reset' tepat di atas gambar preview, supaya user gampang ganti pilihan tanpa harus refresh halaman atau nunggu proses validasi gagal.

Contoh Kode

Di sisi front-end, cukup manfaatin event change pada input file. Saya biasa pakai snippet sederhana ini:

<input type="file" id="foto" accept="image/*">
<img id="preview" src="#" style="display:none;">

<script>
document.getElementById('foto').onchange = evt => {
const [file] = document.getElementById('foto').files
if (file) {
const preview = document.getElementById('preview');
preview.src = URL.createObjectURL(file);
preview.style.display = 'block';
}
}
</script>

Di sisi Laravel, jangan lupa pastiin store-nya rapi:

$request->file('foto')->store('profiles', 'public');

Variasi Implementasi

Kalau project-nya butuh crop atau resize, saya biasanya beralih ke library kayak Cropper.js. Kalau sekadar preview, cara native di atas udah lebih dari cukup. Bedanya, pakai library tambahan nambahin bundle size, tapi kalau butuh manipulasi gambar lebih jauh, itu investasi yang layak banget.

Kesalahan Umum

1. Lupa nambahin enctype="multipart/form-data" di form, yang ujungnya bikin file kosong pas nyampe di controller.
2. Nggak nge-handle tipe file, jadi user bisa aja upload file .exe atau .pdf ke kolom foto.
3. Biarkan file preview menumpuk di memory browser tanpa di-revoke, padahal memori browser ada batasnya.
4. Lupa nambahin limit ukuran file di PHP.ini, alhasil pas file agak gede, Laravel balikin error 413.
5. Asumsi semua user bakal pakai browser modern, padahal ada kalanya kita perlu fallback sederhana kalau fitur URL.createObjectURL nggak jalan.

Ringkasan

Bikin fitur upload dengan preview itu kayak nambahin 'nyawa' di aplikasi kita. User jadi ngerasa lebih terkontrol dan yakin sama apa yang mereka lakuin. Kuncinya bukan cuma di kodenya, tapi di gimana kita bikin alur user jadi lebih intuitif dan anti-panik pas upload data.