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

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) {
     * Reverse the migrations.
     * @return void
    public function down()

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, 

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)
            'file' => 'required',
       $title = time().'.'.request()->file->getClientOriginalExtension();
       $request->file->move(public_path('posts'), $title);
       $storeFile = new Post;
       $storeFile->title = $title;
        return response()->json(['success'=>'File Uploaded Successfully']);

Step 6: Create Blade View

<!DOCTYPE html>
    <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>
        .progress { position:relative; width:100%; }
        .bar { background-color: #00ff00; width:0%; height:20px; }
        .percent { position:absolute; display:inline-block; left:50%; color: #040608;}
<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 class="card-body">
                <form method="POST" action="{{ url('ajax-file-upload-progress-bar') }}" enctype="multipart/form-data">
                    <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 >
                        <input type="submit"  value="Submit" class="btn btn-primary">
<script type="text/javascript">
var SITEURL = "{{URL('/')}}";
$(function() {
        var bar = $('.bar');
        var percent = $('.percent');
            beforeSend: function() {
                var percentVal = '0%';
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
            complete: function(xhr) {
                alert('File Has Been Uploaded Successfully');
                window.location.href = SITEURL +"/"+"ajax-file-upload-progress-bar";

Step 7: Run Server

php artisan serve

Open browser and paste this url


May this example help you.