Image upload in Laravel complete Tutorial.
Tags: laravel, tutorial, programming, beginners
Published: 2022-07-11 09:28:01

In this post, I am going to explain all about Image upload in LARAVEL.

After [Installing Laravel](https://dev.to/shanisingh03/how-to-install-laravel-9-25c4) open code project in code editor & follow the steps below.

## Step - 1
Create a Controller to handle all image upload operations by running command below.

```php
php artisan make:controller ImageController
```

this will create a controller inside `app\Http\Controllers` folder.

Now update your controller with following codes.

```php
<?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
Next thing is to update routes, to update it open `routes/web.php` file and add below routes.

```php
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 code below.

```php
@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 browser and visit `/image-upload` you will see the image upload option.


![Image Upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1ao0qw2e7ytf5nx7pg9.png)

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


![Image Uploaded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm16p79eje877f6l4unu.png)

Here you will get complete video tutorial on Youtube.

{% youtube ZFc2wASN2xw %}

If you face any issues while implementing, please comment your query.

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/techtoolindia)
[Instagram](https://www.instagram.com/techtoolindia/)
[YouTube](https://www.youtube.com/c/TechToolIndia)