Laravel Livewire Image upload

Hi Dev,

In this blog, I will learn you image upload using livewire package in laravel.I write blog step by step about image upload using liviwire in laravel. I also added validation with image upload liviwire in laravel.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communication.

I added image upload validation like image, mimes, max file upload etc, So you can easily understand and you it simply.

Here I will give full example for livewire image uplaod example laravel So Lets follow the bellow step.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

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

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

 
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

Step 3 : Create Table Migration and Model

In this step we have to create migration for images table and Image Model using laravel php artisan command, so first fire bellow command:

php artisan make:model Image -m

After this command you have to put bellow code in your migration file for create images table.

/database/migrations/2020_06_11_100722_create_images_table.php

 
<?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('title'); 
            $table->string('name'); 
            $table->timestamps(); 
        }); 
    } 
 
    /** 
     * Reverse the migrations. 
     * 
     * @return void 
     */ 
    public function down() 
    { 
        Schema::dropIfExists('images'); 
    } 
}

Now we require to run migration be bellow command:

php artisan migrate

After you have to put bellow code in your Image model file for create images table.

app/Image.php

 
<?php 
 
namespace App; 
 
use Illuminate\Database\Eloquent\Model; 
 
class Image extends Model 
{ 
    protected $fillable = ['title','name',]; 
}

Step 4 : Install Livewire

In this step, You will simply install livewire to our laravel application using bellow command:

composer require livewire/livewire

Step 5 : Create Component

Now, You can create livewire component using bellow command, So Let's run bellow command to create image form component:

php artisan make:livewire image-form

Now they created fies on both path:

app/Http/Livewire/ImageForm.php

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

Now both file we will update as bellow for our image form.

app/Http/Livewire/ImageForm.php

 
<?php 
 
namespace App\Http\Livewire; 
 
use Livewire\Component; 
use Livewire\WithFileUploads; 
use App\Image; 
 
class ImageForm extends Component 
{ 
    use WithFileUploads; 
 
    public $title; 
    public $image; 
   
    public function submit() 
    { 
        $validatedData = $this->validate([ 
            'title' => 'required', 
            'image' => 'required|image|mimes:jpeg,png,svg,jpg,gif|max:1024', 
        ]); 
 
        $imageName = $this->image->store("images",'public'); 
 
        $validatedData['name'] = $imageName; 
 
        Image::create($validatedData); 
   
        session()->flash('message', 'Image successfully Uploaded.'); 
 
        return redirect()->to('/image'); 
    } 
 
    public function render() 
    { 
        return view('livewire.image-form'); 
    } 
}

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

 
@if (session()->has('message')) 
    <div class="alert alert-success"> 
        {{ session('message') }} 
    </div> 
@endif 
<form wire:submit.prevent="submit" enctype="multipart/form-data"> 
    <div class="form-group"> 
        <label for="exampleInputTitle">Title</label> 
        <input type="text" class="form-control" id="exampleInputTitle" wire:model="title"> 
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror 
    </div> 
    <div class="form-group"> 
        <label for="exampleInputName">Image</label> 
        <input type="file" class="form-control" id="exampleInputName" wire:model="image"> 
        @error('image') <span class="text-danger">{{ $message }}</span> @enderror 
    </div> 
     <button type="submit" class="btn btn-primary">Save</button> 
</form>

Step 6 : Add Route

now, we need to add route for image form in laravel application. so open your "routes/web.php" file and add following route.

routes/web.php

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

Step 7 : Create View File

Here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('image-form'). so let's add it.

resources/views/image.blade.php

 
<!DOCTYPE html> 
<html> 
<head> 
    <title>laravel livewire image ipload - </title> 
    @livewireStyles 
    <link rel="stylesheet" href="{{ asset(" target="_blank" rel="nofollow" css/app.css') }}"> 
</head> 
<body> 
    <div class="container "> 
        <div class="row mt-5"> 
            <div class="col-md-8 offset-2"> 
                <div class="card mt-5"> 
                  <div class="card-header bg-success"> 
                    <h2 class="text-white">Laravel Livewire Image Ipload - NiceSnippets.com</h2> 
                  </div> 
                  <div class="card-body"> 
                    @livewire('image-form') 
                  </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
<script src="{{ asset('js/app.js') }}"></script> 
@livewireScripts 
</html>