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.