Laravel 8 - jQuery Ajax File Upload with Progress Bar Tutorial

  23662 views   11 months ago Laravel

In this article, i will share with you how to upload file with progress bar in laravel with simple example. file uploading feature is very common things in laravel application. but here i will not show you simple file uploading but here we will see file uploading usisng jquery ajax with progress bar.

File uploading using ajax it's main advantage browser window not need to refresh. when you need file upload with not page refresh then ajax was best option for make any king of functionality in your laravel application.

in this tutorial file upload with progress bar we covert the following steps.

  • Step 1: Create Laravel Application
  • Step 2: Connect to Database
  • Step 3: Configure Model and Migration
  • Step 4: Create Controller
  • Step 5: Create Routes
  • Step 6: Create view
  • Step 7: Start Laravel App

Step - 1: Create Laravel Application

In the first step we will create the fresh laravel application by running the following command in your terminal.

composer create-project --prefer-dist laravel/laravel file-upload-demo

Step - 2: Connect to Database

After create the fresh laravel application then the you need to configure your database setting in your .env file.


Step - 3 : Configure Model and Migration

in this step we will create laravel migration for the store fil upload data into database.

php artisan make:migration create_file_uploads_tbl

running the above command in your terminal then open your created migration file and change into it.



use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateFileUploadsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('file_uploads', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

then run your migration by php artisan migrate command.

after, create migration then now create the file upload model in your laravel application by running the following command.

php artisan make:model FileUpload



namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class FileUpload extends Model

    use HasFactory;

    protected $fillable = [


Step - 4: Create Controller

Now, create the ProgressBarController by running the following command.

php artisan make:controller ProgressBarController



namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\FileUpload;

class ProgressBarController extends Controller

    public function index()
        return view('fileupload');
    public function uploadToServer(Request $request)
            'file' => 'required',
       $name = time().'.'.request()->file->getClientOriginalExtension();
       $request->file->move(public_path('uploads'), $name);
       $file = new FileUpload;
       $file->name = $name;
        return response()->json(['success'=>'Successfully uploaded.']);


Step - 5: Create Routes

create the following route in your routes/web.php file.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProgressBarController;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!

Route::get('/file-upload', [ProgressBarController::class, 'index']);

Route::post('/upload-doc-file', [ProgressBarController::class, 'uploadToServer']);

Step - 6: Create view

now, create the fileupload.blade.php file into resources/views folder and write the following code into it.


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel 8 Bootstrap 5 Progress Bar Example</title>

    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


    <div class="container mt-5" style="max-width: 500px">
        <div class="alert alert-warning mb-4 text-center">
           <h2 class="display-6">jQuery Ajax File uploading with Progress Bar Example - Laravelcode</h2>

        <form id="fileUploadForm" method="POST" action="{{ url('/upload-doc-file') }}" enctype="multipart/form-data">
            <div class="form-group mb-3">
                <input name="file" type="file" class="form-control">

            <div class="d-grid mb-3">
                <input type="submit" value="Submit" class="btn btn-primary">

            <div class="form-group">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>

    <script src=""></script>
    <script src=""></script>

        $(function () {
            $(document).ready(function () {
                    beforeSend: function () {
                        var percentage = '0';
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentage = percentComplete;
                        $('.progress .progress-bar').css("width", percentage+'%', function() {
                          return $(this).attr("aria-valuenow", percentage) + "%";
                    complete: function (xhr) {
                        console.log('File has uploaded');


Step - 7: Start Laravel App

now run your laravel application using the following artisan command.

php artisan serve

then simply run the following URL in your browser and test your file uploading with progress bar functionality.

i hope you like this article.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]