Multiple File Upload With Progress Bar in Laravel

Multiple File Upload With Progress Bar in Laravel

Ajax multiple file upload with progress bar in laravel. In this tutorial, we will show you how to upload multiple file with a progress bar in laravel using ajax.

Sometime, you need to display progress bar while uploading multiple image file in laravel. So this tutorial will guide you step by step on how to upload multiple file with progress bar using ajax in laravel.

Laravel Multiple File Upload with Progress Bar

Now follow the below given simple and easy step to upload multiple file with progress bar in laravel using jQuery ajax:

  • 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, open your terminal and run the following command to install or download laravel app for laravel multiple file upload with progress bar app:

cd xampp\htdocs

Then

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

Step 2: Add Database Details

In this step, Navigate to your downloaded laravel multiple file upload progress bar using ajax root directory and open .env file. Then add your database details in .env file, as follow:

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

In this step, open a command prompt and run the following command:

php artisan make:model Gallery -m

This command will create one model name Gallery.php and as well as one migration file for the Gallery table.

Then Navigate to database/migrations folder and open create_galleries_table.php. Then update 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');
    }
}

After that, run the following command to migrate the table into your select database:

php artisan migrate

Step 4: Add Multiple File Upload Route

In this step, Navigate to the /routes folder and open web.php file. Then update the following routes into your web.php file:

Route::get('multiple-file-upload-progress-bar', '[email protected]');

Route::post('multiple-file-upload', '[email protected]');

Step 5: Create Multiple File Upload Controller by Artisan

In this step, open your terminal and run the following command to create ajax file upload controller file:

php artisan make:controller MultipleFileUploadController

This command will create a controller named MultipleFileUploadController.php file.

Next, Navigate to app/http/controllers/ folder and open MultipleFileUploadController.php. Then add 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);
    }
}

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

In this step, create one blade view file named multiple-file-upload-progress-bar.blade.php.

Now, navigate /resources/views and create one file name multiple-file-upload-progress-bar.blade.php. Then update 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>

Step 7: Run Development Server

Finally, run the following command to start the development server for your laravel multiple file upload with progress bar using ajax app:

 php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080  

Now, open your browser and hit the following URLs into it:

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

If you want to remove public or public/index.php from URL In laravel, Click Me

Conclusion

Laravel multiple file upload with progress bar tutorial, you have learned how to upload multiple image file with progress using ajax in laravel.

This upload multiple image file with progress bar in laravel app will look like:

Multiple Image File Upload with Progress Bar in laravel using ajax

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *