In this tutorial, we are going to learn about Multiple Image Upload in Livewire. So, let's see how we can upload multiple images in Livewire.

First, let's create a model. To do this, switch to the command prompt and run the following command:

php artisan make:model Image –m

Now, switch to the project and go inside the database directory, then migration. From here, open the create_images_table migration file.

<?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('filename');      
            $table->timestamps();           
        });
    }

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

Next, open the Image model and add the fillable:

protected $fillable = ['filename'];

Alright, now let's migrate the migration. To do this, switch to the command prompt and run the following command:

php artisan migrate

Now, let's create a Livewire component. Run the following command:

php artisan make:livewire Images

Next, run the application:

php artisan serve

Now, switch to the project. First, let's create a route for the component. Open the web.php file and create the route:

Route::get('/upload-images',Images::class);

Now, let's open the Images.php component class file and write the following code:

<?php

namespace App\Http\Livewire;

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

class Images extends Component
{
    use WithFileUploads;
    public $images;
    
    public function uploadImages()
    {
        foreach($this->images as $key=>$image){
            $this->images[$key] = $image->store('images','public');            
        }      
        $this->images = json_encode($this->images);      
        Image::create(['filename'=>$this->images]);
        session()->flash('message','Images successfully uploaded');
        $this->emit('imageUploaded');        
    }
}

Next, go to the app.blade.php layout file and add the following code just before the closing body tag:

<script>
    window.livewire.on('imageUploaded',()=>{
            $('#form-upload')[0].reset();
        });
</script>

Now, let's open the images.blade.php view file and add the following code:

<div>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    @if(Session::has('message'))
                        <div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
                    @endif
                    <div class="card">
                        <div class="card-header">
                            Upload Images
                        </div>
                        <div class="card-body">
                            <form id="form-upload" wire:submit.prevent="uploadImages" enctype="multipart/form-data">
                                <div class="form-group">
                                    <lable for="images">File</lable>
                                    <input type="file" name="images" class="form-control" wire:model="images" multiple />                                    
                                </div>

                                <button type="submit" class="btn btn-success">Upload</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

All done! Let's check this. Switch to the browser and go to the URL /upload-images. Here, you can see the form. Now, let's click on browse and select multiple images. Then, click on upload. You can see the images uploaded.

Now, let's see the uploaded images. Go inside the project directory, then storage, then images, and you can see the images here.

Next, let's check inside the table. Open phpMyAdmin, then open the database livewiredb, and browse the table images. You can see the record. Image names are stored in the form of an array.

So, in this way, we can upload multiple images in Livewire.