Multiple File Upload With Progress Bar in Laravel

In this tutorial you will learn about the Multiple File Upload With Progress Bar in Laravel and its application with practical example.

In this Multiple File Upload With Progress Bar in Laravel tutorial I’ll show you how to upload multiple file with progress bar in laravel. In this tutorial you will learn to upload multiple file with a progress bar in laravel using ajax. In this example we will display progress bar while uploading multiple image file in laravel. In this step by step guide I’ll demonstrate you how to upload multiple file with progress bar using ajax in laravel.

Table Of Contents−

Multiple File Upload With Progress Bar in Laravel

Step 1: Download Laravel App
Step 2: Add Database Details
Step 3: Create Migration & Model

Step 4: Add Multiple File Upload Routes
Step 5: Create Multiple File UploadController by Artisan
Step 6: Create Multiple File Upload with Progress Bar Blade View

Step 7: Run Development Server

Step 1: Download Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

1	composer create-project --prefer-dist laravel/laravel Blog

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration & Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Gallery -m

1	php artisan make:model Gallery -m

The above command will create a model name Gallery.php and a migration file for the Gallery table. Then go to database/migrations folder and open create_galleries_table.php. Then put the following code into create_galleries_table.php:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateGalleriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('galleries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('galleries');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('galleries', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('galleries');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Add Multiple File Upload Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('multiple-file-upload-progress-bar', 'MultipleFileUploadController@index');
 
Route::post('multiple-file-upload', 'MultipleFileUploadController@uploadMultipleFile');

Route::get('multiple-file-upload-progress-bar', 'MultipleFileUploadController@index');

Route::post('multiple-file-upload', 'MultipleFileUploadController@uploadMultipleFile');

Step 5: Create Multiple File Upload Controller by Artisan

Now, lets create a controller named MultipleFileUploadController using command given below –

php artisan make:controller MultipleFileUploadController

1	php artisan make:controller MultipleFileUploadController

The above command will create a controller named MultipleFileUploadController.php file. Now, go to app/http/controllers/ folder and open MultipleFileUploadController.php. Then put the following file uploading methods into your MultipleFileUploadController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Gallery;
 
class MultipleFileUploadController extends Controller
{
    public function index()
    {
     return view('multiple-file-upload-progress-bar');
    }
 
    public function uploadMultipleFile(Request $request)
    {
 
         foreach($request->file('file') as $image)
         {
              $new_name = rand() . '.' . $image->getClientOriginalExtension();
              $image->move(public_path('images'), $new_name);
              Gallery::insert(['title' => $new_name]);
         }
 
         $res = array(
          'success'  => 'Multiple Image File Has Been uploaded Successfully'
         );
 
        return response()->json($res);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Gallery;

class MultipleFileUploadController extends Controller

{

public function index()

{

return view('multiple-file-upload-progress-bar');

}

public function uploadMultipleFile(Request $request)

{

foreach($request->file('file') as $image)

{

$new_name = rand() . '.' . $image->getClientOriginalExtension();

$image->move(public_path('images'), $new_name);

Gallery::insert(['title' => $new_name]);

}

$res = array(

'success' => 'Multiple Image File Has Been uploaded Successfully'

);

return response()->json($res);

}

Step 6: Create Multiple File Upload with Progress Bar Blade View

In this step, we will create a blade file named multiple-file-upload-progress-bar.blade.php. Now, go to /resources/views and create a file name multiple-file-upload-progress-bar.blade.php. Then put the following code into your multiple-file-upload-progress-bar.blade.php file:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 7 Multiple File Upload with Progress bar using Ajax jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">    
<div class="card">
<div class="card-header">
<h3 class="card-title">Upload Multiple Images in Laravel 7</h3>
</div>
<div class="card-body">
<br />
<form method="post" action="{{url('multiple-file-upload')}}" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-3" align="right"><h4>Select Multiple Files</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>
<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>

<html>

<head>

<title>Laravel 7 Multiple File Upload with Progress bar using Ajax jQuery</title>

</head>

<body>

<h3 class="card-title">Upload Multiple Images in Laravel 7</h3>

</div>

<br />

@csrf

<div class="col-md-3" align="right"><h4>Select Multiple Files</h4></div>

</div>

</div>

</form>

<br />

</div>

<br />

</div>

<br />

</div>

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

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/multiple-file-upload-progress-bar
OR hit in browser
http://localhost/blog/public/multiple-file-upload-progress-bar

http://localhost:8000/multiple-file-upload-progress-bar

OR hit in browser

http://localhost/blog/public/multiple-file-upload-progress-bar

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Multiple File Upload With Progress Bar in Laravel