Laravel Livewire: Membuat Fitur Upload Multiple Image dengan Preview

Admin・ 14 September 2021

8 min read ・ 3844 views

Laravel Livewire Multiple Image Upload - Di artikel ini, saya akan share langkah-langkah atau cara untuk membuat fitur upload multiple image dengan laravel dan livewire. Fitur upload multiple image biasanya digunakan atau dibutuhkan untuk menambahkan image atau foto lebih dari satu file untuk data seperti product, property, atau yang lainnya.

Oke, mari kita langsung saja ke langkah-langkahnya 👇 👨‍💻

Langkah 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new livewire-multiple-image-upload

//via Composer
composer create-project laravel/laravel livewire-multiple-image-upload

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk implementasi membuat fitur upload multiple image. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama livewire-multiple-image-upload.

Tunggu hingga proses installasi selesai dan jika sudah selesai, jangan lupa untuk masuk ke direktori project menggunakan perintah cd livewire-multiple-image-upload.

Langkah 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=livewire_multiple_image_upload
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk percobaan membuat fitur upload multiple image dengan laravel 8 dan livewire. Jika kamu menggunakan xampp sebagai local server, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama livewire_multiple_image_upload. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Langkah 3: Buat Model & Migration

php artisan make:model Image -m

Oke, kemudian di langkah ketiga kita perlu membuat file model dan migration untuk Image. Silahkan jalankan perintah seperti di atas untuk generate file Image model dan migration.

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

Selanjutnya, buka file database/migrations/xxxx_xx_xx_xxxxxx_create_images_table.php. Kita tambahkan field image di table images seperti kode di atas. Jika sudah, save dan jalankan perintah php artisan migrate untuk memigrasi semua file migration.

protected $guarded = [];

Jangan lupa, di file Models/Image.php, kita perlu menambahkan protected $guarded = []; seperti kode di atas.

Langkah 4: Install Livewire

composer require livewire/livewire

Selesai menginstall laravel dan membuat database, kita lanjutkan dengan menginstall livewire di project laravel kita. Jalankan perintah seperti di atas untuk menginstall livewire.

Langkah 5: Buat Livewire Components

php artisan make:livewire MultipleImageUpload

Oke, selanjutnya kita perlu membuat livewire component untuk membuat tampilan atau view dan logic upload multiple image. Silahkan jalankan perintah artisan seperti di atas. Dari perintah tersebut, akan men-generate dua file yang terletak di direktori seperti di bawah ini.

CLASS: app/Http/Livewire/MultipleImageUpload.php
VIEW:  resources/views/livewire/multiple-image-upload.blade.php

Langkah 5.1: MultipleImageUpload.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Image;

class MultipleImageUpload extends Component
{
    use WithFileUploads;
 
    public $images = [];

    public function save()
    {
        $this->validate([
            'images.*' => 'image|max:1024', // 1MB Max
        ]);
 
        foreach ($this->images as $key => $image) {
            $this->images[$key] = $image->store('images');
        }
    
        $this->images = json_encode($this->images);

        Image::create(['image' => $this->images]);
 
        session()->flash('success', 'Images has been successfully Uploaded.');
 
        return redirect()->back();
    }

    public function render()
    {
        return view('livewire.multiple-image-upload');
    }
}

Kita sudah membuat livewire components, selanjutnya kita perlu menyesuaikan component tersebut dengan kebutuhan kita. Untuk itu, silahkan buka file di app/Http/Livewire/MultipleImageUpload.php dan ubah kode yang ada menjadi seperti kode di atas.

Untuk menambahkan fitur upload file di livewire component, kita perlu menambahkan trait use Livewire\WithFileUploads;. Pada kode di atas, kita menambahkan method $images dengan data array untuk mengambil atau membaca inputan dari wire:model="images" di file view (livewire components). Selain itu, kita juga menggunakan perulangan foreach untuk menyimpan semua file yang diupload ke folder images (di dalam direktori storage/app) dan menyimpannya menjadi format JSON (menggunakan json_encode()) di field image di table images.

Langkah 5.2: multipe-image-upload.blade.php

<div class="card">
    <div class="card-body">
        <form wire:submit.prevent="save">   
            @if (session()->has('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif 
            @if ($images)
                Photo Preview:
                <div class="row">
                    @foreach ($images as $images)
                    <div class="col-3 card me-1 mb-1">
                        <img src="{{ $images->temporaryUrl() }}">
                    </div>
                    @endforeach
                </div>
            @endif
            <div class="mb-3">
                <label class="form-label">Image Upload</label>
                <input type="file" class="form-control" wire:model="images" multiple>
                <div wire:loading wire:target="images">Uploading...</div>
                @error('images.*') <span class="error">{{ $message }}</span> @enderror
            </div>
            <button type="submit" class="btn btn-primary">Save Image</button>
            <div wire:loading wire:target="save">process...</div>
        </form>
    </div>
</div>

Livewire meng-handle upload multiple file secara otomatis dengan mendeteksi attribute multiple pada tag <input>. Di file livewire component multiple-image-upload.blade.php ini, kita menambahkan form dengan action ke method save di file MultipleImageUpload.php. Kemudian kita tambahkan session success yang menampilkan pesan success ketika kita berhasil melakukan upload multiple image.

Di dalam form, kita tambahkan satu input field saja yaitu untuk upload multiple image dengan tambahan tampilan loading ketika proses upload multiple image. Selain itu, kita juga menambahkan kode untuk menampilkan atau preview image untuk file image yang dipilih dan sebelum melakukan submit, menggunakan ->temporaryUrl(). Jadi, secara keseluruhan, kode yang ada di file multiple-image-upload.blade.php akan seperti kode di atas.

Langkah 6: Buat Master View

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

        <title>Livewire - Multiple Image Upload</title>
        
        @livewireStyles
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <h1 class="text-center my-2">Livewire - Multiple Image Upload</h1>
                @livewire('multiple-image-upload')
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
        @livewireScripts
    </body>
</html>

Kemudian kita buat file master view dengan tambahan script @livewireStyles, @livewireScripts dan tidak lupa @livewire('multiple-image-upload'). Jadi, silahkan buat file view baru dengan nama file master.blade.php, dan tambahkan kode seperti di atas.

Langkah 7: Define Route

Route::view('multiple-image-upload','master');

Di langkah terakhir, kita perlu mendaftarkan route baru di file routes/web.php. Sebagai contoh, disini kita daftarkan Route::view('multiple-image-upload','master');.

Langkah 7: Testing

Kita telah sampai diakhir artikel tutorial membuat fitur upload multiple image dengan livewire. Untuk mengujinya, silahkan jalankan server menggunakan perintah php artisan serve, kemudian buka project di browser dengan URL seperti 127.0.0.1:8000/multiple-image-upload. 

Selanjutnya, klik input field dan pilih beberapa file image dan klik save image, maka file-file image akan tersimpan di folder storage/app/images dan menambahkan data baru di table images.

Sekian artikel tutorial kali ini, sampai disini kita telah sama-sama belajar bagaimana cara membuat fitur upload multiple image dengan laravel 8 dan livewire. Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. 👋 

📖 Full Documentation: Livewire Multiple Files