DEV Community

Cover image for Image upload in Laravel complete Tutorial.
TechTool India
TechTool India

Posted on

4 1

Image upload in Laravel complete Tutorial.

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

After Installing Laravel 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 artisan make:controller ImageController
Enter fullscreen mode Exit fullscreen mode

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

Now update your controller with 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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Step - 2

Next thing is to update routes, to update it open routes/web.php file and add below routes.

Route::controller(ImageController::class)->group(function(){
    Route::get('/image-upload', 'index')->name('image.form');
    Route::post('/upload-image', 'storeImage')->name('image.store');
});
Enter fullscreen mode Exit fullscreen mode

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.

@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
Enter fullscreen mode Exit fullscreen mode

Now if you go to browser and visit /image-upload you will see the image upload option.

Image Upload

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

Image Uploaded

Here you will get complete video tutorial on Youtube.

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

Thank You for Reading

Reach Out To me.
Twitter
Instagram
YouTube

Neon image

Build better on Postgres with AI-Assisted Development Practices

Compare top AI coding tools like Cursor and Windsurf with Neon's database integration. Generate synthetic data and manage databases with natural language.

Read more →

Top comments (2)

Collapse
 
ebnibrahem profile image
ebnibrahem

nice,
how make thumbnails from uploaded image.
useful in small card preview.

Collapse
 
techtoolindia profile image
TechTool India

You can same image and add size atribute in image tag, or resize the uploaded image and then save.
hope this help you.

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay