Upload dan Menampilkan Gambar Menggunakan Laravel 8

Pada era aplikasi web modern, fitur upload dan menampilkan gambar menjadi salah satu fungsi yang paling sering dibutuhkan. Baik itu untuk profil pengguna, galeri produk, atau konten artikel, kemampuan ini harus tersedia dalam sistem web yang profesional 🖼️.

Laravel 8 sebagai framework PHP yang populer, menyediakan cara mudah dan aman untuk menangani proses upload file. Dengan memanfaatkan storage, validation, dan routing bawaan, pengembang dapat membuat fitur upload gambar hanya dalam beberapa langkah sederhana 💡.

Artikel ini akan membahas langkah demi langkah cara membuat fitur upload dan menampilkan gambar di Laravel 8, lengkap dengan contoh kode dan penjelasan mendalam.

1. Persiapan Awal

Instalasi Laravel dan Konfigurasi Dasar

Pastikan kamu sudah menginstal Composer dan PHP ≥ 8.0. Buat proyek Laravel baru menggunakan perintah berikut:

composer create-project laravel/laravel upload-gambar

Masuk ke direktori proyek dan jalankan server lokal:

cd upload-gambar
php artisan serve

Kemudian buka http://127.0.0.1:8000 di browser untuk memastikan proyek berjalan dengan baik ⚡.

2. Membuat Model dan Migration

Membuat Struktur Database untuk Menyimpan Gambar

Buat model bernama Image menggunakan artisan command:

php artisan make:model Image -m

Buka file migration di folder database/migrations/ dan tambahkan kolom untuk menyimpan nama file gambar:

public function up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('image');
        $table->timestamps();
    });
}

Jalankan migrasi:

php artisan migrate

3. Membuat Controller

Menangani Proses Upload

Buat controller dengan perintah:

php artisan make:controller ImageController

Kemudian isi dengan kode berikut:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
{
    public function index()
    {
        $images = Image::latest()->get();
        return view('images.index', compact('images'));
    }

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

        $imageName = time().'.'.$request->image->extension();
        $request->image->move(public_path('images'), $imageName);

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

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

Controller ini akan memvalidasi, menyimpan file, dan menulis data ke tabel database 📸.

4. Membuat Route

Menghubungkan Halaman Upload dan Daftar Gambar

Buka file routes/web.php dan tambahkan:

use App\Http\Controllers\ImageController;

Route::get('/images', [ImageController::class, 'index']);
Route::post('/images', [ImageController::class, 'store'])->name('images.store');

Route ini akan menghubungkan form upload ke method store() pada controller 🔗.

5. Membuat View

Form Upload dan Tampilan Gambar

Buat folder resources/views/images/ lalu file index.blade.php dengan isi berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Upload Gambar Laravel 8</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="p-4">

<div class="container">
    <h2 class="mb-4">Upload dan Menampilkan Gambar Menggunakan Laravel 8</h2>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            {{ $message }}
        </div>
    @endif

    <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label>Judul:</label>
            <input type="text" name="title" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Pilih Gambar:</label>
            <input type="file" name="image" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Upload</button>
    </form>

    <hr>

    <div class="row">
        @foreach ($images as $img)
        <div class="col-md-3 text-center mb-4">
            <img src="{{ asset('images/' . $img->image) }}" width="100%" height="200px" class="rounded">
            <p>{{ $img->title }}</p>
        </div>
        @endforeach
    </div>
</div>

</body>
</html>

View ini berfungsi sebagai antarmuka untuk upload gambar dan menampilkannya dalam grid responsif 🧩.

6. Struktur Folder Gambar

Menentukan Lokasi Penyimpanan

Laravel akan menyimpan gambar di folder public/images. Jika folder belum ada, buat manual:

mkdir public/images

Pastikan juga permission folder mengizinkan penulisan file ✨.

7. Validasi File Upload

Mencegah Upload File Berbahaya

Laravel memiliki sistem validasi kuat yang memastikan hanya file gambar dengan format tertentu yang diterima:

'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'

Dengan demikian, file yang berpotensi berbahaya akan otomatis ditolak 🚫.

8. Tabel Fitur Upload Laravel

Ringkasan Fungsi

Fitur	Deskripsi	Keterangan
Upload File	Mengirim file ke server	Melalui form multipart
Validasi	Memastikan format file sesuai	Otomatis oleh Laravel
Move File	Menyimpan file di direktori publik	Fungsi `move()`
Display Image	Menampilkan gambar di view	Menggunakan helper `asset()`

9. Tips Optimalisasi

Efisiensi dan Keamanan

🔒 Gunakan validasi MIME type
🗂️ Simpan gambar di storage disk Laravel
⚙️ Gunakan UUID untuk nama file agar unik
🧩 Hindari folder publik terlalu besar
🧠 Gunakan pagination jika gambar banyak

10. FAQ (Pertanyaan Umum)

Apakah bisa upload lebih dari satu gambar? Bisa, gunakan input dengan atribut multiple.
Bagaimana cara menampilkan gambar dari storage? Gunakan php artisan storage:link.
Bisa pakai drag-and-drop? Ya, dengan library JavaScript tambahan.
Apakah Laravel otomatis mengganti nama file? Tidak, tapi bisa pakai timestamp.
Bagaimana membatasi ukuran file? Gunakan aturan max: di validasi.
Apakah bisa upload ke AWS S3? Ya, Laravel mendukung cloud storage.
Bagaimana jika file corrupt? Tambahkan pengecekan isValid().
Apakah bisa menghapus gambar? Ya, gunakan fungsi unlink() atau Storage::delete().
Bagaimana membuat thumbnail? Gunakan library Intervention Image.
Apakah bisa menambahkan watermark? Bisa dengan manipulasi gambar.
Bagaimana jika gambar tidak tampil? Periksa path dan permission folder.
Bisa menampilkan URL absolut? Gunakan helper url().
Apakah bisa upload PDF? Bisa, ubah validasi MIME type.

Kesimpulan

Membuat fitur upload dan menampilkan gambar di Laravel 8 sangat mudah berkat dukungan bawaan framework ini. Dengan beberapa baris kode, kamu sudah bisa membangun sistem upload yang aman, cepat, dan efisien 🚀.

Selain itu, kamu dapat mengembangkan fitur lanjutan seperti multiple upload, crop otomatis, dan integrasi cloud storage untuk kebutuhan skala besar ☁️.