File Uploading Laravel Livewire 3 | EP 3

In this post, I will show you how to image upload with preview using laravel liveiwre 3.

In this example, we will create a PhotoUpload Livewire component. This component will feature a form with a file input field and include image validation. The user can select an image, which will then be uploaded to the storage folder using the `WithFileUploads` trait. Additionally, we will save the uploaded image's details into the database.

Step 1: Create PhotoUpload Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire PhotoUpload

Now they created files on both paths:

app/Livewire/PhotoUpload.php
   
resources/views/livewire/photo-upload.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/PhotoUpload.php

<?php

namespace App\Livewire;

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

class PhotoUpload extends Component
{
    use WithFileUploads;

    public $photo;

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

    public function submit(){
        $this->validate([
            "photo" => "required|image"
        ]);

        $filepath = $this->photo->store("photos");

        $image = Image::create([
            "title" => "Test",
            "filepath" => $filepath
        ]);

        info($image)
    }
}

resources/views/livewire/photo-upload.blade.php

<div>
    <form wire:submit="submit">

        @if($photo)
            Photo Preview:
            <img src="{{ $photo->temporaryUrl() }}" width="400px"><br/>
        @endif
        
        <label>Image:</label>
        <input type="file" name="photo" class="form-control" wire:model="photo">
        @error("photo")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <button class="btn btn-success">Submit</button>

    </form>
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Counter') }}</div>

                <div class="card-body">
                    <livewire:photo-upload />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

I hope it can help you...