How to Upload Multiple Images with Progress Bar in Laravel 5.8

Laravel framework is a widely used PHP framework by Web developer for their web application development, and Laravel 5.8 is latest version of this framework. If you are fresher in Laravel framework, and if you are not know how to upload multiple images in Laravel 5.8 framework with display uploading process in Progress bar, then this post will help you to learn uploading multiple images with progress bar in Laravel 5.8 by using Ajax jQuery. So, User can upload multiple images on server without refresh of web page.

In Web Application file uploading is a very userful feature, because by this feature user can upload their images or file on web server from their local computer. But sometime if there is image or multimedia file size is very large and it has take some time for upload to server, then at that time how to can user can know file uploading is running or now. At that time if we have use progress bar for display uploading process on web page then user can know image uploading process is still running. For this purpose we have use progress bar for display uploading process then this feature will add our web application usability.

So, here we have make multiple image upload feature in Laravel 5.8 framework by using Ajax with jQuery. So, if User has upload multiple number of images on server folder then at that time we want to display uploading process of multiple image by using progress bar. So, in this post, we will learn how can we upload multiple image file through Laravel 5.8 with Ajax jQuery and display uploaded image file on web page.

• Install Laravel 5.8 Application

• Create Controller

• Create View Blade File

• Set Route of Controller Method

• Run Laravel Application

Install Laravel 5.8 Application

First we need to install Laravel 5.8 application in our computer. For this we have to go Command prompt and write following command.

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

This command will download and install latest version of Laravel framework in define folder name.

Create Controller

Once Laravel 5.8 framework has been download and install in define folder, now we need to create controller for handle http request for multiple images. For this also we have go to command prompt and write following command.

php artisan make:controller MultipleUploadController

This above command will make MultipleUploadController.php controller file in app/Http/Controllers folder. This controller file we have make following method for make feature like upload multiple images.

index() - This is the root method of this controller. This method has load multiple_file_upload.php view file in browser.

upload() - This method has been received Ajax request for upload multiple images into define destination. This method has upload multiple images one by one. Before upload images it has rename image name and then upload into folder. After completing uploading process then it will send data to Ajax request in json format.

app/Http/Controllers/MultipleUploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MultipleUploadController extends Controller
{
    function index()
    {
     return view('multiple_file_upload');
    }

    function upload(Request $request)
    {
     $image_code = '';
     $images = $request->file('file');
     foreach($images as $image)
     {
      $new_name = rand() . '.' . $image->getClientOriginalExtension();
      $image->move(public_path('images'), $new_name);
      $image_code .= '<div class="col-md-3" style="margin-bottom:24px;"><img src="/images/'.$new_name.'" class="img-thumbnail" /></div>';
     }

     $output = array(
      'success'  => 'Images uploaded successfully',
      'image'   => $image_code
     );

     return response()->json($output);
    }
}

Create View Blade File

For display output in browser, In Laravel we need to use View file. In Laravel 5.8 view file has been store in resources/views folder. In this folder we have create multiple_file_upload.blade.php file. In this file we have use jQuery, Bootstrap and jQuery Form library. In this file we have make one form for upload multiple image. For validate images in file tag, we have use accept="image/*" attribute and for select multiple images, we have use multiple attribute.

For submit form data to controller method, we have use jQuery Form plugin. So, form will be submitted without refresh of web page. Once images has been successfully uploaded then Ajax request will received uploaded images code for display on web page. Below you can find source for this view file.

resources/views/multiple_file_upload.blade.php

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - Multiple File Upload with Progressbar using Ajax jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
 </head>
 <body>
  <div class="container">    
     <br />
     <h3 align="center">Laravel 5.8 - Multiple File Upload with Progressbar using Ajax jQuery</h3>
     <br />
     <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Upload Multiple Images in Laravel 5.8</h3>
                </div>
                <div class="panel-body">
                    <br />
                    <form method="post" action="{{ route('upload') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-3" align="right"><h4>Select Images</h4></div>
                            <div class="col-md-6">
                                <input type="file" name="file[]" id="file" accept="image/*" multiple />
                            </div>
                            <div class="col-md-3">
                                <input type="submit" name="upload" value="Upload" class="btn btn-success" />
                            </div>
                        </div>
                    </form>
                    <br />
                    <div class="progress">
                        <div class="progress-bar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            0%
                        </div>
                    </div>
                    <br />
                    <div id="success" class="row">

                    </div>
                    <br />
                </div>
            </div>
  </div>
 </body>
</html>

<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>

Set Route of Controller Method

After creating controller and view blade file, now we have to set route for controller method. For this we have to open routes/web.php file and write following code for set route.

routes/web.php

Route::get('multiple-file-upload', 'MultipleUploadController@index');

Route::post('multiple-file-upload/upload', 'MultipleUploadController@upload')->name('upload');

Run Laravel Application

Once all code is ready, so lastly we need to start Laravel server, for that we have to go command prompt and write following command.

php artisan serve

This command will start Laravel application. For run this upload multiple image feature, we have to write http://127.0.0.1:8000/multiple-file-upload in browser tab, then you can access this Laravel 5.8 multiple image upload with progress bar on web page. Let's check it is working or not. Happy Laravel coding.