Laravel 9 Livewire Multiple Image Upload Example

Laravel 9 Livewire Multiple Image Upload Example

//for ubuntu user cd var/www/html Then install laravel 9 latest application using the following command:

composer create-project --prefer-dist laravel/laravel blog Step 2 – Database Configuration Open downloaded laravel app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Create Model & Migration Run the following command on command prompt to create model and migration file:

php artisan make:model Image -m The above command will create two files into your laravel livewire multiple image upload application, which is located inside the following locations:

/app/Models/Image.php /database/migrations/create_contacts_table.php Now, find Image.php model file inside /app/Models directory. And open it then add the fillable property code into Image.php file, like following:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
    use HasFactory;
    protected $fillable = [
        'title'
    ];
}
Then, find create_images_table.php file inside /database/migrations/ directory. Then open this file and add the following code into function up() on this file:

    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->timestamps();
        });
        
    }
    ```
Now, open again your terminal and type the following command on cmd to create tables into your selected database:

```php
php artisan migrate

Step 4 – Create Multi Upload Routes To open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Livewire\MultipleImageUpload; Route::get('livewire-multiple-image-upload', MultipleImageUpload::class); Step 5 – Installing Livewire Package Run following command on command prompt to install livewire package in laravel 9 app:

composer require livewire/livewire Then install node js package:

npm install
Next run npm

npm run dev

Now, run database migration command:

php artisan migrate Step 6 – Build Livewire Multiple Image Upload Components Run following command on command prompt to create livewire components in laravel 9 app:

php artisan make:livewire MultipleImageUpload

The above command will create two files, which is located on the following locations:

app/Http/Livewire/MultipleImageUpload.php

resources/views/livewire/multiple-image-upload.blade.php So, open MultipleImageUpload.php, which is located inside app/http/Livewire directory and add the following code into it:

namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Image;
class MultipleImageUpload extends Component
{
    use WithFileUploads;
    public $images = [];
    public function render()
    {
        return view('livewire.home');
    }
    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(['title' => $this->images]);
        session()->flash('message', 'Images has been successfully Uploaded.');
        return redirect()->to('/livewire-multiple-image-upload');
    }
}

Next, open multiple-image-upload.blade.php, which is located inside resources/views/livewire/ directory and add the following code into it: