Hello Devs, 

In this tutorial, we will learn Laravel 7 Ajax File Upload with Progress Bar Example

A progress bar displays how much time is remaining to upload a file. 

Follow this step by step guide below. 



Step 1: Install Laravel App For Progress Bar

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


Step 2: Add Database Details

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

  php artisan make:model Post -m


Navigate to database/migrations folder and open create_posts_table.php.

update the following code into create_posts_table.php:

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


run the following command

  php artisan migrate


Step 4: Create Route For File

Navigate to the app/routes folder and open web.php file

Route::get('ajax-file-upload-progress-bar', 'ProgressBarUploadFileController@index');
Route::post('store', 'ProgressBarUploadFileController@store');


Step 5: Generate Controller

php artisan make:controller ProgressBarUploadFileController


Navigate to app/http/controllers/ folder

Add this code, 

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Post;
 
class ProgressBarUploadFileController extends Controller
{
    public function index()
    {
        return view('progress-bar-file-upload');
    }
 
    public function store(Request $request)
    {
        $request->validate([
            'file' => 'required',
        ]);
 
       $title = time().'.'.request()->file->getClientOriginalExtension();
  
       $request->file->move(public_path('posts'), $title);
 
       $storeFile = new Post;
       $storeFile->title = $title;
       $storeFile->save();
  
        return response()->json(['success'=>'File Uploaded Successfully']);
    }
}


Step 6: Create Blade View

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Ajax File Upload with Progress Bar Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <style>
        .progress { position:relative; width:100%; }
        .bar { background-color: #00ff00; width:0%; height:20px; }
        .percent { position:absolute; display:inline-block; left:50%; color: #040608;}
   </style>
</head>
<body class="bg-dark">
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
              <div class="card-header text-center">
                <h4>Laravel 7 Ajax File Upload with Progress Bar Example</h4>
              </div>
              <div class="card-body">
                <form method="POST" action="{{ url('ajax-file-upload-progress-bar') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <input name="file" type="file" class="form-control"><br/>
                        <div class="progress">
                            <div class="bar"></div >
                            <div class="percent">0%</div >
                        </div>
                        <br>
                        <input type="submit"  value="Submit" class="btn btn-primary">
                    </div>
                </form>
              </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
var SITEURL = "{{URL('/')}}";
$(function() {
    $(document).ready(function()
    {
        var bar = $('.bar');
        var percent = $('.percent');
          $('form').ajaxForm({
            beforeSend: function() {
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                alert('File Has Been Uploaded Successfully');
                window.location.href = SITEURL +"/"+"ajax-file-upload-progress-bar";
            }
          });
    }); 
 });
</script>
</body>
</html>



Step 7: Run Server

php artisan serve


Open browser and paste this url

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


May this example help you.