Laravel 11 Livewire Image Upload Tutorial

by

In this Laravel 11 Livewire Image Upload Tutorial guide, I’ll teach you how to upload images using Laravel Livewire pacakage. This tutorial will help you understand how to implement image uploads in Laravel with Livewire, covering the essential steps involved.

Step 1: Create Migration and Model

First, generate a migration and model with this command:

php artisan make:model Photo -m

Next, open the migration file located at database/migrations/xxxx_xx_xx_create_photos_table.php and define the necessary columns:

<?php

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

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

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

Then, adjust the app/Models/Photo.php file to specify which attributes are mass assignable:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Photo extends Model
{
    use HasFactory;

    protected $fillable = [
        'title', 'name',
    ];
}

Apply the migration to your database with:

php artisan migrate

Step 2: Install Livewire

Install the Livewire package using Composer:

composer require livewire/livewire

Step 3: Create Image Upload Component

Generate a new Livewire component for handling image uploads:

php artisan make:livewire UploadFile

Modify the app/Http/Livewire/UploadFile.php file to include the image upload logic:

<?php

namespace App\Http\Livewire;

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

class UploadFile extends Component
{
    use WithFileUploads;
    public $title;
    public $name;

    /**
     * Handle the form submission and file upload.
     *
     * @return void
     */
    public function submit()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'name' => 'required|image|mimes:jpg,jpeg,png,svg,gif|max:2048',
        ]);

        $validatedData['name'] = $this->name->store('photos', 'public');

        Photo::create($validatedData);

        session()->flash('message', 'File successfully uploaded.');
    }

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

Next, create the view for the component in resources/views/livewire/upload-file.blade.php:

<form wire:submit.prevent="submit" enctype="multipart/form-data">
    <div>
        @if(session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Enter title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    
    <div class="form-group">
        <input type="file" class="form-control" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <button type="submit" class="btn btn-primary">Upload</button>
</form>

Step 4: Define Image Upload Route

In the routes/web.php file, add a route for the image upload form:

<?php

use Illuminate\Support\Facades\Route;

Route::get('upload-image', function () {
    return view('upload');
});

Step 5: Create View File

Create a new view file named upload.blade.php in the resources/views directory and include the Livewire component:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire Image Upload Tutorial</title>
    @livewireStyles
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
<div class="container">
    <div class="card mt-4">
        <div class="card-header">
            Laravel 11 Livewire Image Upload Example
        </div>
        <div class="card-body">
            @livewire('upload-file')
        </div>
    </div>
</div>

<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</body>
</html>

Step 6: Test the Application

Start the Laravel development server with:

php artisan serve

Navigate to http://localhost:8000/upload-image in your browser to test the image upload feature.