Hai Dev,

Hari ini, saya ingin membagikan kepada Anda cara mengupload multiple image menggunakan livewire di aplikasi laravel. Kami akan menampilkan beberapa unggahan gambar di laravel livewire.

Pertama, tambahkan sifat WithFileUploads ke komponen Anda. Sekarang Anda dapat menggunakan wire:model pada input file seolah-olah mereka adalah tipe input lain dan Livewire akan mengurus sisanya.

Livewire membuat upload dan store  file menjadi sangat mudah. ​​Livewire menangani banyak pengunggahan file secara otomatis dengan mendeteksi beberapa atribut pada tag <input>.

Di sini, saya akan memberi Anda contoh lengkap untuk unggah beberapa gambar livewire di laravel. Jadi, mari kita lihat contoh di bawah ini dan ikuti langkah di bawah ini.

Langkah 1 : Install Laravel App

Pada langkah pertama, kita perlu mendapatkan aplikasi versi laravel baru menggunakan perintah di bawah ini. Jadi, mari kita buka terminal dan jalankan perintah di bawah.

composer create-project --prefer-dist laravel/laravel blog

Langkah 2 : Setup Database Configuration

Setelah berhasil menginstal aplikasi laravel kemudian mengkonfigurasi pengaturan database. Kami akan membuka file ".env" dan mengubah nama database, nama user, dan password dalam file env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Langkah 3 : Create image table and model

Pada langkah ini, Anda harus membuat tabel image di database Anda. Jalankan perintah di bawah ini untuk membuat migrasi dan model Jadi mari kita buka terminal dan jalankan perintah di bawah:

php artisan make:model Image -m

Setelah menjalankan perintah di atas, Anda akan melihat file migrasi di path database berikut/migrasi dan Anda harus cukup memasukkan kode berikut dalam file migrasi untuk membuat tabel image.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
 /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('image');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Jalankan file migrasi dan jalankan perintah berikut:

php artisan migrate

Setelah membuat tabel 'image' kemudian perubahan dalam image Model menyalin kode di bawah dan dimasukkan ke dalam file Image.php.

app/Image.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    protected $fillable = ['image'];
}

Langkah 4 : Install Livewire

Pada langkah ini, Anda cukup menginstal livewire ke aplikasi laravel kami menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 5 : Create Component

Sekarang, Anda dapat membuat komponen livewire menggunakan perintah di bawah, Jadi Mari kita jalankan perintah di bawah ini untuk membuat komponen bentuk Image:

php artisan make:livewire image-upload

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/ImageUpload.php
resources/views/livewire/image-upload.blade.php

Sekarang file pertama kita akan perbarui sebagai di bawah untuk file ImageUpload.php.

app/Http/Livewire/ImageUpload.php

?php

namespace App\Http\Livewire;

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

class ImageUpload extends Component
{
    use WithFileUploads;

    public $images = [];

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

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

        foreach ($this->images as $key => $image) {
            $this->images[$key] = $image->store('images','public');
        }

        $this->images = json_encode($this->images);

        Image::create(['image' => $this->images]);

        session()->flash('message', 'Image successfully Uploaded.');

        return redirect()->to('/mutliple-image-upload');
    }
}

Langkah 6: Tambahkan Route

sekarang, kita perlu menambahkan route untuk formr image dalam aplikasi laravel. jadi buka file "routes/web.php" Anda dan tambahkan route berikut.

routes/web.php

Route::view('multiple-image-upload','livewire.home');

Langkah 7 : Create View

Di sini, kita akan membuat file blade untuk rute operasi panggilan crud. dalam file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('image-upload') jadi mari kita tambahkan.

resources/views/livewire/image-upload.blade.php

<div>
    <form>
        <div class=" add-input">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="file" class="form-control" wire:model="images" multiple>
                        @error('image.*') <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn text-white btn-success" wire:click.prevent="store">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>

resources/views/livewire/home.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    @livewireStyles
</head>
<body>
    <div class="container">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white"><h3>Laravel Livewire Multiple Image Upload - Medikre.com</h3></div>

                    <div class="card-body">
                        @if (session()->has('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif

                        @livewire('image-upload')
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @livewireScripts
</script>
</body>
</html>

Sekarang kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/multiple-image-upload

Semoga Itu akan membantumu...