How to upload an Image In Laravel 9?
Upload image & Store in Public, Store or AWS S3.
In this post, I will explain all about Image upload in LARAVEL.
After Installing Laravel open the code project in the code editor & follow the steps below.
Step - 1
Create a Controller to handle all image upload operations by running the command below.
php artisan make:controller ImageController
this will create a controller inside app\Http\Controllers
folder.
Now update your controller with the following codes.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
// View File To Upload Image
public function index()
{
return view('image-form');
}
// Store Image
public function storeImage(Request $request)
{
$request->validate([
'image' => 'required|image|mimes:png,jpg,jpeg|max:2048'
]);
$imageName = time().'.'.$request->image->extension();
// Public Folder
$request->image->move(public_path('images'), $imageName);
// //Store in Storage Folder
// $request->image->storeAs('images', $imageName);
// // Store in S3
// $request->image->storeAs('images', $imageName, 's3');
//Store IMage in DB
return back()->with('success', 'Image uploaded Successfully!')
->with('image', $imageName);
}
}
Step - 2
The next thing is to update routes, to update it open routes/web.php
file and add the below routes.
Route::controller(ImageController::class)->group(function(){
Route::get('/image-upload', 'index')->name('image.form');
Route::post('/upload-image', 'storeImage')->name('image.store');
});
Step - 3
Now it's time to create a view file, open resources/views
folder and create a file named image-form.blade.php
and update the file with the code below.
@extends('app')
@section('content')
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h1 class="text-center" style="margin-top: 100px">Image Upload</h1>
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{$message}}</strong>
</div>
<img src="{{ asset('images/'.Session::get('image')) }}" />
@endif
<form method="POST" action="{{ route('image.store') }}" enctype="multipart/form-data">
@csrf
<input type="file" class="form-control" name="image" />
<button type="submit" class="btn btn-sm">Upload</button>
</form>
</div>
@endsection
Now if you go to the browser and visit /image-upload
you will see the image upload option.
and once you select an image and upload it you will see the success message with the image.
Here you will get a complete video tutorial on Youtube.
If you face any issues while implementing, please comment on your query.
Thank You for Reading