Laravel 9 jQuery Ajax File Upload Progress Bar Tutorial

Laravel 9 File Upload with Progress Bar Tutorial with Example - Lara  Tutorials

Laravel 9 File Upload and Progress Bar tutorial; In this step-by-step guide, we will teach you how to create a file upload and progress bar component in the Laravel application using jQuery Ajax.

File upload is a quintessential component in every web/mobile application; it lets you upload files such as images, document files, etc., to the server or database.

A file upload module becomes more relevant and user-friendly when a progress bar is attached to it; it helps to know about file uploading progress.

Laravel 9 jQuery Ajax File Upload Progress Bar Tutorial

Use the following steps to implement file upload progress bar using jQuery ajax in laravel 9 apps:

  • Step 1 – Install Laravel 9 App
  • Step 2 – Connecting App to Database
  • Step 3 – Create Migration & Model
  • Step 4 – Add Routes
  • Step 5 – Create Controller by Artisan
  • Step 6 – Create Blade View
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel 9 App

First of all, Execute the following command on the terminal to install or download laravel 9 app:

cd xampp\htdocs


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

Step 2 – Connecting App to Database

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

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 execute the following command:

php artisan make:model Doc -m

This command will create one model name Doc.php. And as well as one migration file for the Docs table.

Then Navigate to database/migrations folder and open create_docs_table.php. Then update the following code into create_docs_table.php:

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateDocsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('docs', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down()

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

php artisan migrate

Step 4 – Create Route For File

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

use App\Http\Controllers\UploadFileController;
Route::get('ajax-file-upload-progress-bar', [UploadFileController::class, 'index']);
Route::post('store', [UploadFileController::class, 'store']);

Step 5 – Generate Controller by Artisan

In this step, execute the following command on terminal to create ajax file upload controller file:

php artisan make:controller UploadFileController

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

Next, Navigate to app/http/controllers/ folder and open UploadFileController.php. Then add the following file uploading methods into your UploadFileController.php file:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Doc;
class UploadFileController 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('docs'), $title);
       $storeFile = new Doc;
       $storeFile->title = $title;
        return response()->json(['success'=>'File Uploaded Successfully']);

Step 6 – Create Blade View

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

Now, navigate /resources/views and create one file name progress-bar-file-upload.blade.php. Then update the following code into your progress-bar-file-upload.blade.php file:

<!DOCTYPE html>
<title>Laravel 9 Progress Bar File Upload Using Tutorial Example</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
.progress { position:relative; width:100%; }
.bar { background-color: #b5076f; width:0%; height:20px; }
.percent { position:absolute; display:inline-block; left:50%; color: #040608;}
<div class="container mt-5">
<div class="card">
<div class="card-header text-center">
<h2>Laravel 9 Progress Bar File Upload Using Ajax Tutorial</h2>
<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 Development Server

Now, execute the following command on terminal to start the development server for your laravel 9 ajax file with a progress bar app:

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

Step 8 – Test This App

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

OR hit in browser


Laravel 9 ajax file upload with progress bar tutorial, we have learned how to upload the file with progress using ajax in laravel 9 app.

Leave a Reply

Your email address will not be published.