Laravel 6 Image Upload Tutorial

  • 07-04-2022
  • 1084
  • Laravel 6
  • Haresh Chauhan

Hello Artisan,

In this tutorial, we will learn how to image upload in the New Larave 6 Application. Image uploading is a primary requirement for every project so today I will show how to create this image uploading task in Laravel 6 Application. In this example, we will make a simple example of image upload in Laravel 6 with validation like image, mimes, max file upload, etc.

So in this example, we will create two routes get and post method routes and select images into form input and upload into public image directory. So, have to follow the below steps and get Laravel 6 image upload.

Laravel 6 Image Upload Tutorial

Step 1 : Install Laravel 6

In this step we require to get fresh Laravel 6 application. So now open your terminal and fire below command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Create Routes into web.php file.

Here, step we will need to add routes in web.php file. So, Open your file and add two routes.

routes/web.php

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('upload',['as' => 'image.upload','uses' => 'ImageController@imageUpload']);
Route::post('image-upload-store',['as' => 'image.upload.store','uses' => 'ImageController@imageUploadStore']);

AngularJS Login Logout with Laravel 6

Step 3 : Create ImageController

In the 3rd step we need to create ImageController. So now let's run bellow command and get ImageController

In this ImageController we write two method imageUpload() and imageUploadStore(). So, let's add code.

php artisan make:controller ImageController

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller {
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUpload() {
        return view('image');
    }
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUploadStore(Request $request) {

        $this->validate($request,[
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
        ]);

        $imageName = time() . '.' . $request->image->extension();

        $request->image->move(public_path('image'), $imageName);

        return back()->with('success', 'You Image successfully uploaded.')->with('image', $imageName);
    }
}

How to get Current Date and Time in AngularJS?

Step 3: Create Blade File

Here, In this last step, we require to create blade file for Image Upload. In this file, we will make a simple form with file input. So, let's do it.

resources/views/image.blade.php

MongoDB Database Installation

<!DOCTYPE html>
<html>
<head>
    <title>laravel 6 image upload example - webappfix.com</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>laravel 6 image upload example - webappfix.com</h2></div>
        <div class="panel-body">
            @if ($success = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $success }}</strong>
            </div>

            <img src="images/{{ Session::get('image') }}"> @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="{{ route('image.upload.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <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>

I hope you like this article.

Thanks...

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :