Laravel Multiple File Upload with Progress Bar.

Multiple File Upload with Progress Bar

In this tutorial we will learn how to upload multiple images with progress bar in Laravel. A progress bar shows how much time is remaining to upload a file.

When too many files to upload , it takes time to upload on a server. Meanwhile, we can display progress bar so that end user can know how much time is remaining to upload a file.

So in this tutorial we will create file multiple file upload with progress bar.

Step 1 : Add Below Route.

Route::get('image','ImageController@index');

Route::post('multiple_image','ImageController@uploadMultiple');

Step 2 : Create Controller And Add Below Code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index(){
         return view('image');
    }

    public function uploadMultiple(Request $request){

        foreach($request->file('image') as $image) {
             $new_name = rand() . '.' . $image->getClientOriginalExtension();
             $image->move(public_path('upload'), $new_name);            
        }
        $res = array(
         'success'  => 'Multiple Image File Has Been uploaded Successfully'
        );
         return response()->json($res);
    }
}

Step 3 : Create View And Add Below Code.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Image Validation In Laravel</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
</head>
<body>

<h3 class="text-success" align="center">Multiple Image Upload In Laravel</h3><br>
<div class="container">    
  <div class="panel-group">
           
    <div class="panel panel-primary">
     <div class="panel-heading">Image Validation In Laravel</div>
            <form action="{{ url('multiple_image') }}" method="post" enctype="multipart/form-data">   
            @csrf      
                <div class="panel-body">                 
                    <div class="form-group">
                        <label class="control-label col-sm-2">Select Image:</label>
                        <div class="col-sm-5">
                          <input type="file"  name="image[]" multiple>
                        </div>
                    </div>
                  <br><br>
                    <button class="btn btn-success" type="submit" style='margin-left:20%'>Upload Image</button>
            </div>
            <div class="progress">
                <div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                    0%
                </div>
            </div>
            <div id="success" class="row"></div>
        </form>
      </div>
    </div>
</div>
<script>
$(document).ready(function(){
    $('form').ajaxForm({
        beforeSend:function(){
            $('#success').empty();
            $('.progress-bar').text('0%');
            $('.progress-bar').css('width', '0%');
        },
        uploadProgress:function(event, position, total, percentComplete){
            $('.progress-bar').text(percentComplete + '0%');
            $('.progress-bar').css('width', percentComplete + '0%');
        },
        success:function(data)
        {
            if(data.success)
            {
                $('#success').html('<div class="text-success text-center"><b>'+data.success+'</b></div><br /><br />');
                $('#success').append(data.image);
                $('.progress-bar').text('Uploaded');
                $('.progress-bar').css('width', '100%');
            }
        }
    });
});
</script>
</body>
</html>