Hello Devs, 

In this tutorial, we will learn Laravel 8 Image Upload Tutorial Example

This example will show to select an image and then it will upload in "images" directory of the public folder.

Follow this step-by-step guide below. 

Step 1 : Install Laravel 8 Application

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


Step 2: Create Routes

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


Step 3: Create Controller

php artisan make:controller UploadImageController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadImageController extends Controller
{
    public function index()
    {
      return view('imageUpload');
    }

    public function store(Request $request)
    {
      $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:1024',
        ]);
    
        $imageName = time().'.'.$request->image->extension();
     
        $request->image->move(public_path('images'), $imageName);
  
        / store image in database from here /
    
        return redirect()->back()->with('success','Image uploaded successfully.')->with('image',$imageName);
    }
}



Store Image in Storage Folder

$request->image->storeAs('images', $imageName);
// storage/app/images/file.png


Store Image in Public Folder

$request->image->move(public_path('images'), $imageName);
// public/images/file.png


Step 4: Create Blade File

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Multiple File Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-3 mt-5">
            <div class="card mt-5">
                <div class="card-header text-center bg-primary">
                    <h2 class="text-white"> <strong>Multiple File Upload</strong></h2>
                </div>
                <div class="card-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>
		          @endif
		            @if (count($errors) > 0)
		                <ul class="alert alert-danger pl-5">
		                  @foreach($errors->all() as $error)
		                     <li>{{ $error }}</li> 
		                  @endforeach
		                </ul>
		            @endif
		            <form method="post" action="{{ route('multiple.file.upload.store') }}" enctype="multipart/form-data">
		              @csrf
		              <div class="input-group file-div control-group lst increment" >
		                <input type="file" name="files[]" class="myfrm form-control">
		                <div class="input-group-btn"> 
		                  <button class="btn btn-success add-btn" type="button"><i class="fldemo fa fa-plus"></i></button>
		                </div>
		              </div>
		              <div class="clone hide">
		                <div class="file-div control-group lst input-group" style="margin-top:10px">
		                  <input type="file" name="files[]" class="myfrm form-control">
		                  <div class="input-group-btn"> 
		                    <button class="btn btn-danger" type="button"><i class="fldemo fa fa-close"></i></button>
		                  </div>
		                </div>
		              </div>
		              <div class="row">
		                <div class="col-md-12 text-center mt-4">
		                  <button type="submit" class="btn btn-success rounded-0"><i class="fa fa-save"></i> Save</button>
		                </div>
		              </div>
		          </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
      $(".add-btn").click(function(){
          var lsthmtl = $(".clone").html();
          $(".increment").after(lsthmtl);
      });
      $("body").on("click",".btn-danger",function(){
          $(this).parents(".file-div").remove();
      });
    });
</script>
</body>
</html>


 run the custom validation rules

php artisan serve

open bellow URL on your browser:

http://localhost:8000/image-upload


May this example help you.