Fitur upload gambar hampir selalu dibutuhkan dalam aplikasi web, baik untuk avatar user, thumbnail artikel, maupun galeri produk. Namun, upload file juga menjadi salah satu celah keamanan paling sering dieksploitasi jika tidak ditangani dengan benar.

Pada tutorial ini, kita akan membahas cara membangun sistem upload gambar dari nol dengan pendekatan yang aman, rapi, dan siap digunakan untuk production.

Alur Upload Gambar

Sebelum masuk ke implementasi, pahami alur upload gambar berikut:

1. User memilih file gambar
2. Sistem memvalidasi file
3. File disimpan ke server
4. Path gambar disimpan ke database
5. Gambar ditampilkan kembali di aplikasi

Setiap langkah wajib divalidasi untuk mencegah penyalahgunaan.

Form Upload Gambar

<form action="/upload" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="image" accept="image/*">
    <button type="submit">Upload</button>
</form>

Atribut enctype="multipart/form-data" wajib digunakan agar file dapat terkirim dengan benar.

Validasi File Upload

Validasi adalah langkah terpenting dalam upload file.

$request->validate([
    'image' => 'required|image|mimes:jpg,jpeg,png,webp|max:2048',
]);

Penjelasan singkat:

• image memastikan file adalah gambar
• mimes membatasi tipe file
• max membatasi ukuran file (dalam KB)

Menyimpan Gambar ke Storage

public function upload(Request $request)
{
    $request->validate([
        'image' => 'required|image|mimes:jpg,png,jpeg|max:2048',
    ]);

    $path = $request->file('image')->store('uploads', 'public');

    return back()->with('success', 'Gambar berhasil diupload');
}

File disimpan ke folder storage/app/public/uploads.

Menyimpan Path ke Database

Post::create([
    'title' => $request->title,
    'image' => $path,
]);

Yang disimpan ke database bukan file, melainkan path file.

Menampilkan Gambar

<img src="{{ asset('storage/' . $post->image) }}" alt="Gambar">

Pastikan sudah menjalankan perintah berikut:

php artisan storage:link

Agar folder storage dapat diakses secara publik.

Rename File Agar Unik

Untuk mencegah bentrok nama file:

$file = $request->file('image');
$filename = time() . '_' . $file->getClientOriginalName();
$path = $file->storeAs('uploads', $filename, 'public');

Pendekatan ini memastikan setiap file memiliki nama unik.

Menghapus Gambar Lama

Saat update data, gambar lama harus dihapus:

use Illuminate\Support\Facades\Storage;

Storage::disk('public')->delete($post->image);

Ini penting agar storage tidak penuh oleh file yang tidak terpakai.

Keamanan Upload Gambar

Beberapa praktik terbaik yang wajib diterapkan:

• Batasi tipe dan ukuran file
• Jangan percaya ekstensi file
• Simpan file di luar folder public
• Rename file sebelum disimpan
• Gunakan permission folder yang benar

Upload file yang tidak aman dapat menjadi celah serius dalam aplikasi.

Upload Banyak Gambar (Multiple)

<input type="file" name="images[]" multiple>

foreach ($request->file('images') as $image) {
    $image->store('uploads', 'public');
}

Pendekatan ini cocok untuk galeri atau produk.

Penutup

Upload gambar bukan sekadar memindahkan file ke server. Diperlukan validasi, manajemen file, dan pengamanan yang tepat agar fitur ini aman dan scalable. Dengan pendekatan yang benar, upload gambar dapat digunakan dengan aman bahkan untuk aplikasi berskala besar.

Tutorial ini bisa dikembangkan lebih lanjut menjadi upload avatar, upload gambar artikel, hingga integrasi cloud storage.