• Hello, Visitor
  • Monday, June 24, 2024
Search Result
Home » Laravel » Livewire » Laravel Livewire Image Upload with Preview

Laravel Livewire Image Upload with Preview

Video Tutorial:

Hello friends, in this blog, we would like to show you laravel 8 livewire image upload with preview example. We will give you simple example of how to upload image with preview in laravel 8.

So, let's follow few step to create example of laravel 8 livewire image upload with preview tutorial.

You just need to follow few step and you will get basic crud stuff using livewire component, model, route, bootstrap 4 and blade.

Now lets start,

Step 1: Create Laravel 8 Project
composer create-project --prefer-dist laravel/laravel LivewireImageUpload


laravel new LivewireImageUpload

Step 2: Install Livewire in this Project

composer require livewire/livewire

Step 3: Database Configuration

Now we will make database configuration for example database name, username, password etc for our crud application of laravel 8 livewire. So let's open .env file and fill all details like as bellow:



Step 4: Make Student Model & Migration

php artisan make:model Image -m

go to database/migrations/image_table_migration & in up() function add the code

Schema::create('images', function (Blueprint $table) {

Now, migrate the migration

php artisan migrate

Step 5: Make Livewire Component

make base layout component

php artisan make:livewire layouts/base

make ImageUpload Component

php artisan make:livewire ImageUploadComponent

Step 6: Add Get Route

Here, we need to add get route for image upload application. so open your "routes/web.php" file and add following route.


use App\Http\Livewire\ImageUploadComponent;

use Illuminate\Support\Facades\Route;

Route::get('image-upload', ImageUploadComponent::class);

Step 7: Filesystems.php Configuration

go to config/filesystems.php and change your local disk path

'local' => [
       'driver' => 'local',
       'root' => public_path('uploads'),

Step 8: Add the Following Codes

Now, let's copy bellow code and put on StudentsComponent files,


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NzCoding - Laravel LivewireCRUD</title>

    {{-- Bootstrap Styles --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    {{-- fontawsome css --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

        background-image: url('assets/images/bg01.png');
    {{ $slot }}

    {{-- Bootstrap Scripts --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>




namespace App\Http\Livewire;

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

class ImageUploadComponent extends Component
    use WithFileUploads;

    public $image;

    public function mount()

    public function updated($fields)
            'image' => 'required',
    public function uploadImage()
            'image' => 'required',

        $image = new Image();

        $imageName = Carbon::now()->timestamp. '.' .$this->image->extension();
        $this->image->storeAs('image_uploads', $imageName);
        $image->image = $imageName;


        session()->flash('message', 'Image has been uploaded successfully');

        $this->image = '';


    public function render()
        //Get Uploaded Images

        $images = Image::orderBy('id','DESC')->get();

        return view('livewire.image-upload-component',['images'=>$images])->layout('livewire.layouts.base');


    <div class="container mt-5 pt-5">
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card" style="height: 70vh;">
                    <div class="card-header">
                        <h5 class="card-title">Image Upload</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 pl-4 pr-4 text-center">
                                @if (session()->has('message'))
                                    <div class="alert alert-success text-center">{{ session('message') }}</div>
                                <form wire:submit.prevent="uploadImage">
                                    <div class="form-group">
                                        <label for="image" class="font-weight-bold">Select Image</label>
                                        <div class="row justify-content-center">
                                            <div class="col-md-8">
                                                <input type="file" class="form-control" wire:model="image" style="padding: 3px 5px;" />
                                            <span class="text-danger" style="font-size: 11.5px;">{{ $message }}</span>

                                        <div wire:loading wire:target="image" wire:key="image"><i class="fa fa-spinner fa-spin mt-2 ml-2"></i> Uploading</div>

                                        {{-- ImagePreview --}}

                                        @if ($image)
                                            <img src="{{ $image->temporaryUrl() }}" width="100" alt="" class="mt-2">

                                    <div class="form-group text-center">
                                        <button type="submit" class="btn btn-primary w-50 mt-2"><div wire:loading wire:target="uploadImage" wire:key="uploadImage"><i class="fa fa-spinner fa-spin"></i></div> Upload</button>
                            <div class="col-md-8">
                                <div class="card" style="height: 58vh;">
                                    <div class="card-header">All Images</div>
                                    <div class="card-body">
                                        @if ($images->count() > 0)
                                            <div class="row">
                                                @foreach ($images as $image)
                                                    <div class="col-md-2 mb-4">
                                                        <img src="{{ asset('uploads/image_uploads') }}/{{ $image->image }}" class="img-fluid" alt="">
                                            <div class="row">
                                                <div class="col-md-12 text-center">
                                                    No Image Found

Now we are ready to run our the application. So run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


Thanks for reading this post

I hope it can help you....


17 July, 2022 at 03:28 PM

HI again, may I request for a tutorial on how to upload and download a file? example is pdf file. :)

Leave a Reply

You must Login to add a comment