In this video we are going to learn about Multiple Image Upload in Livewire.
So lets see how can we upload multiple images in livewire.
First of all lets create a model.
So switch to the command prompt and run the command.

php artisan make:model Image –m

Now switch to the project and just go inside the database directory then migration
And from here just open create_images_table migration.

<?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');
    }
}

Now just open the Image model and here add the fillable.

protected $fillable = ['filename'];

Alright , now lets migrate the migration.
So switch to the command prompt and run the command

php artisan migrate

Now lets create a livewire component.
Run the following command.

php artisan make:livewire Images

Now run the application

php artisan serve

Now switch to the project.
And first of all lets create the route for the component.
So lets open web.php file and create the route.

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

Now lets open 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');        
    }
}

Now go to the app.blade.php layout file add the following code just before the closing body tag.

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

Now lets open the images.blade.php view file and 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>

Now all done lets check this so.
Switch to the browser and go to the url /upload-images.
And here you can see the form.
Now lets click on browse and select multiple images.
And click on upload.
You can see images uploaded.
Now lets see the uploaded image.
So just go inside the project directory then storage.
Then images and you can see the images here.
Now lets check inside the table.
So just open phpmyadmin.
And open the database livewiredb.
And now browse the table images.
And you see the record.
Image names are stored in form of array.
So in this way we can upload multiple images in livewire.