Laravel 8 Image Upload Example

Websolutionstuff | Oct-06-2020 | Categories : Laravel PHP jQuery

In this article, we will see the laravel 8 image upload example. Image or file upload is the most common task in web development. So here, we will show you how to upload images in laravel 8. Here we will see laravel 8 upload images to a public folder. So, we will create two routes, one for the get method and the second for the post method, and also we are creating a basic form with file input. So you have to simply select the image and then it will upload in the "images" directory of the public folder.

So, let's see the laravel 8 image upload and display.

Image Upload In Laravel 8 With Preview

Step 1: Add Routes

First of all, we need to install laravel 8 if you have already then add routes in the routes/web.php file shown below

Route::get('upload/image', 'App\Http\Controllers\UserController@ImageUpload');
Route::post('upload/image/store', 'App\Http\Controllers\UserController@ImageUploadStore');

 

Step 2: Create Controller

In this step, we will create new UserController and we will add two method ImageUpload() and ImageUploadStore(). here the first method will handle the get method other one for the post.

app/Http/Controllers/UserController .php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller
{
    public function ImageUpload()
    {
    	return view('index');	
    }

    public function ImageUploadStore(Request $request)
    {
    	 $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
        ]);
    
        $imageName = time().'.'.$request->image->extension();  
     
        $request->image->move(public_path('images'), $imageName);
  
        return back()
            ->with('success','You have successfully upload image.')
            ->with('image',$imageName); 
    }
}

 

 

Step 3: Create Blade File

In the blade file, we will create a basic form with an upload button. So, add the below code.

<html>
<head>
    <title>Laravel 8 Image Upload Example - websolutionstuff.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h2 style="margin-top: 30px;">Laravel 8 Image Upload Example - websolutionstuff.com</h2>
        <div class="panel-body"> 
            <div class="col-md-8">    
            @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="{{asset('images')}}/{{ Session::get('image') }}" width="300" height="300">
            @endif
        
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <form action="{{ url('upload/image/store') }}" method="POST" enctype="multipart/form-data">
            @csrf
                <div class="row"> <br>   
                    <div class="col-md-6">
                        <input type="file" name="image" class="form-control">
                    </div>     
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-success">Upload</button>
                    </div>     
                </div>
            </form>
            </div>    
        </div>
    </div>
</body>  
</html>

 

 

Output:

laravel 8 image upload example

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Order By Query Example
Laravel 9 Order By Query Examp...

In this article, we will see laravel 9 order by query example. how to use order by in laravel 9.The orderBy me...

Read More

Mar-28-2022

How To Get Data Between Two Dates In Laravel 9
How To Get Data Between Two Da...

In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...

Read More

Dec-19-2022

How to Image Upload Laravel 11 Vue 3 Example
How to Image Upload Laravel 11...

Hello, laravel web developer! In this article, we'll see how to image upload in laravel 11 vue 3. Here, we'...

Read More

May-27-2024

Laravel Signature Pad Example
Laravel Signature Pad Example

In this article, we will learn about the laravel signature pad example. we will perform a digital signature pad in larav...

Read More

Feb-03-2021