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.
Categories:
