How to Upload Image In Laravel 10

Published June 17th, 2023 4 min read

Today, We will learn How to upload image in laravel 10. I will give you simple example for image upload in Laravel 10. I will create two routes one for the get method to render forms and another for the post method to upload image code.

Please follow the below steps :

Step 1 – Define Routes
Step 2 – Create Controller By Artisan Command
Step 3 – Create Blade View
Step 4 – Run Development Server

Setp 1 : Define Routes

open routes/web.php file and add the routes

Route::get('upload-image', [UploadImageController::class, 'index']);
Route::post('save', [UploadImageController::class, 'save'])->name('image.store');

Step 2: Create Controller By Artisan Command

We will create a new UploadImageController using artisan command and add two method index() and store() for render view and store image.

Let's Create UploadImageController :

php artisan make:controller UploadImageController

Let's Add below code in controller app/Http/Controllers/UploadImageController.php

<?php

namespace App\Http\Controllers;

 
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use App\Models\Image;


class UploadImageController extends Controller
{

    public function index(): View
    {
        return view('imageUpload');
    }

    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', // add required and image extension validation
        ]);

        $imageName = time().'.'.$request->image->extension();  // change image extension
        $request->image->storeAs('public/images', $fileName); // store image
        
        $image= new Image; // save image using Image Module
        $image->image = $imageName;
        $image->save();

        return back()->with('success', 'You have successfully upload image.')->with('image', $imageName); 

    }

}

Step 3 : Create Blade View

we need to create imageUpload.blade.php file in path resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Image Upload</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2>Laravel 10 Image Upload</h2>
      </div>
      <div class="panel-body">
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
        </div>
        <img src="images/{{ Session::get('image') }}">
        @endif
        <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label class="form-label" for="inputImage">Image:</label>
                <input 
                    type="file" 
                    name="image" 
                    id="inputImage"
                    class="form-control @error('image') is-invalid @enderror">
                @error('image')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-success">Upload</button>
            </div>
        </form>
      </div>
    </div>
</div>
</body>
</html>

Step 4 : Run Development Server

Now all are set to go. Now run php artisan serve command to start the development server. Don't forget to run this command php artisan storage:link

php artisan serve

Go to browser and type below URL

http://localhost:8000/user