Hello Devs,

In this tutorial, we are going to discover about  image uploading using livewire package in laravel.

Follow this step by step guide given below:




Step 1 :

 Install Laravel App

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



Step 2 : 

Setup Database Configuration open ".env" file and change the database

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

php artisan make:model Image -m

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

Run this command:

php artisan migrate

app/Image.php 

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    protected $fillable = ['title','name',];
}



Step 4 :


 Install Livewire

composer require livewire/livewire



Step 5 : 


Create Component

php artisan make:livewire image-form	

app/Http/Livewire/ImageForm.php

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

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 routes/web.php

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



Step 7 :


 Create View File resources/views/image.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel livewire image ipload - rathorji.in</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 - Rathorji.in</h2>
                  </div>
                  <div class="card-body">
                    @livewire('image-form')
                  </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>


Run this command:

php artisan serve

Open this URL:

http://localhost:8000/image


I hope this example helps you.