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 - nicesnippets.com</title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('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>	

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/image

It will help you...