How to upload an Image In Laravel 9?

How to upload an Image In Laravel 9?

Upload image & Store in Public, Store or AWS S3.

Shani Singh's photo
Shani Singh
·Jul 11, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

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.

Image Upload

and once you select an image and upload it you will see the success message with the image.

Image Uploaded

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

Reach Out To me. Twitter Instagram YouTube

Did you find this article valuable?

Support Shani Singh by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this