Belajar Laravel dari Nol – Part 3: Upload Gambar & Validasi File di Laravel untuk Pemula

Mengizinkan pengguna mengunggah gambar adalah fitur dasar tapi kritis dalam banyak aplikasi. Laravel menyediakan dukungan lengkap untuk menangani upload file, menyimpan ke storage, serta melakukan validasi tipe dan ukuran file.

---

🎯 Tujuan Part 3

• Membuat form upload gambar di Laravel
• Menyimpan gambar ke direktori public atau storage
• Validasi file (ukuran, tipe, wajib/tidak)
• Menampilkan gambar yang telah diupload

---

🧰 Studi Kasus: Upload Foto Produk

Setiap produk akan memiliki:

• nama (string)
• harga (integer)
• foto (string / path file)

---

🔧 1. Update Migration dan Model

a. Migration

Edit file xxxx_create_produks_table.php:

$table->string('foto')->nullable(); // untuk simpan nama file

Jalankan:

php artisan migrate:refresh

b. Model

Tambahkan ke app/Models/Produk.php:

protected $fillable = ['nama', 'harga', 'foto'];

---

🖥️ 2. Form Upload Gambar

Edit create.blade.php atau edit.blade.php:

<form action="{{ route('produk.store') }}" method="POST" enctype="multipart/form-data">
  @csrf
  <input type="text" name="nama" placeholder="Nama Produk" required>
  <input type="number" name="harga" placeholder="Harga" required>
  
  <input type="file" name="foto" accept="image/*">
  <button type="submit">Simpan</button>
</form>

⚠️ Penting: enctype="multipart/form-data" wajib untuk upload file.

---

✅ 3. Validasi & Simpan File

Edit method store() di ProdukController.php:

public function store(Request $request)
{
    $request->validate([
        'nama'  => 'required',
        'harga' => 'required|numeric',
        'foto'  => 'nullable|image|mimes:jpeg,png,jpg|max:2048'
    ]);

    $fotoName = null;
    if ($request->hasFile('foto')) {
        $fotoName = time() . '.' . $request->foto->extension();
        $request->foto->move(public_path('uploads/produk'), $fotoName);
    }

    Produk::create([
        'nama' => $request->nama,
        'harga' => $request->harga,
        'foto' => $fotoName
    ]);

    return redirect()->route('produk.index');
}

---

📸 4. Menampilkan Gambar

Edit index.blade.php:

@foreach($produk as $p)
  <tr>
    <td>{{ $p->nama }}</td>
    <td>{{ $p->harga }}</td>
    <td>
      @if($p->foto)
        <img src="{{ asset('uploads/produk/' . $p->foto) }}" width="80">
      @else
        <small>Tidak ada gambar</small>
      @endif
    </td>
  </tr>
@endforeach

---

🧠 Tips & Best Practice

Aspek	Rekomendasi
Validasi	Selalu validasi image, mimes, dan max:
Nama file unik	Gunakan time(), Str::uuid(), atau Hash::make() untuk hindari tabrakan
Folder upload	Gunakan folder public/uploads/... untuk akses langsung
Gambar default	Sediakan gambar default jika foto == null
Storage	Untuk skala besar, gunakan Storage::disk('s3')->put() dll

---

☁️ Alternatif Penyimpanan: Laravel Storage

Jika ingin menyimpan gambar di storage/app/public, gunakan:

$request->foto->storeAs('public/produk', $fotoName);

Dan akses dengan:

<img src="{{ asset('storage/produk/' . $p->foto) }}">

Pastikan sudah publish link:

php artisan storage:link

---

🧰 Elektra Network Vision – Spesialis Media Upload Laravel

Kami bantu Anda:

• Upload & manajemen file Laravel
• Integrasi cloud (S3, Google Drive, Wasabi)
• Kompresi & resize gambar otomatis

🌐 elektranetworkvision.com — Mitra Laravel terbaik untuk performa dan efisiensi.