How to Image Upload in Laravel 11 Livewire

Websolutionstuff | Jun-07-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to image upload in laravel 11 Livewire. Here, we'll learn about the laravel 11 livewire upload image. Also, you can validate the file size, and file types of image upload in laravel 11.

To upload the image, we will add the WithFileUploads trait to your component. You can also store images on different storage systems like local filesystem disks, and Amazon S3 buckets.

Laravel 11 Livewire Image Upload

laravel 11 livewire image upload

 

Step 1: Install Laravel 11

In this step, we'll install laravel 11 using the following composer command.

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

 

 

Step 2: Create Migration and Model

Then, we'll create a migration and model using the following command.

php artisan make:migration create_images_table

Migration:

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

After that, we will migrate the table into the database and create an image table.

php artisan migrate

Now, we will create Image Mode using the following command.

php artisan make:model Image

app/Models/Image.php

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

 

 

Step 3: Install Livewire

Next, we'll install Laravel Livewire using the following composer command.

composer require livewire/livewire

 

Step 4: Create Livewire Component

Then, we'll create a livewire image upload component using the following command.

php artisan make:livewire image-upload

app/Http/Livewire/image-upload.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Image;
  
class ImageUpload extends Component
{
    use WithFileUploads;
    public $file, $title;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $validatedData['name'] = $this->image->store('images', 'public');
  
        Image::create($validatedData);
  
        session()->flash('message', 'Image Uploaded Successfully');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.image-upload');
    }
}

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

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

Now, we'll define routes to the web.php file.

routes/web.php

Route::get('image-upload', function () {
    return view('default');
});

 

Step 6: Create View File

Then, we'll create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to Image Upload in Laravel 11 Livewire - Websolutionstuff</title>
    @livewireStyles
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        How to Image Upload in Laravel 11 Livewire - Websolutionstuff
      </div>
      <div class="card-body">
        @livewire('image-upload')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

 


You might also like:

Recommended Post
Featured Post
How To Setup Cron Job Task Scheduler In Laravel 10
How To Setup Cron Job Task Sch...

In this article, we will delve into the process of setting up a cron job task scheduler in Laravel 10. Our focus will be...

Read More

Apr-05-2023

How To Import SQL File Into MySQL Using Command
How To Import SQL File Into My...

In this article, we will see how to import SQL files into MySQL using the command. You can import databases in multiple...

Read More

Nov-10-2022

Laravel 8 Send Mail using Queue
Laravel 8 Send Mail using Queu...

In this tutorial I will show you laravel 8 send mail using queue, many time we can see some process to take mo...

Read More

Sep-24-2021

How To Encrypt And Decrypt String In Laravel 9
How To Encrypt And Decrypt Str...

In this article, we will see how to encrypt and decrypt a string in laravel 9. Using crypt helper, As we all know larave...

Read More

Mar-09-2022