Multiple File Upload with Progress Bar

Laravel Multiple File Upload with Progress Bar.

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>

Related Posts