Build Ajax File Upload and Progress Bar in Laravel 9

A software application is developed by creating tons of components; every component is responsible for handling a specific task.

In this tutorial, you will learn how to build file upload and progress bar in Laravel application using the jQuery AJAX.

Ajax is an old and powerful technique to build dynamic and super-fast web pages. It works on the asynchronous pattern, and it does its job utterly behind the bar with utmost agility.

The major advantage of using ajax is it updates the particular part of the web page rather than the entire page. So, with Ajax, you don’t have to reload the whole page all over again.

This laravel progress bar example will show you the best possible way to use AJAX to create a file upload progress bar component in laravel.

Laravel 9 Ajax File Upload Progress Bar Example

  • Step 1: Create Laravel Project
  • Step 2: Connect to Database
  • Step 3: Model and Migration
  • Step 4: Generate and Set Up Controller
  • Step 5: Make File Upload Routes
  • Step 6: Create Blade View
  • Step 7: Start Laravel App

Create Laravel Project

You can begin installing a brand new laravel application using the provided command.

composer create-project --prefer-dist laravel/laravel laravel-progress-bar-example

After creating the new app, enter into the project.

cd laravel-demo

Connect to Database

Further, add details into .env file for connecting laravel to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

Configure Model and Migration

Execute composer command to create new model and migration files; in migration and model files, add the table values for inserting the file upload data.

php artisan make:model StudentProfile -m

Move towards your migration file, define the file name property inside the Schema::create() method.

Update code in the create_student_profiles_table.php file.

<?php

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

class CreateStudentProfilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('student_profiles', function (Blueprint $table) {
            $table->id();
            $table->string('file_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('student_profiles');
    }
}

Similarly, update the app/Models/StudentProfile.php file with the given code.

<?php

namespace App\Models;

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

class StudentProfile extends Model
{
    use HasFactory;
    protected $fillable = [
        'file_name'
    ];
}

Once the model and migration files are updated, run the migration to create the student_profiles table.

php artisan migrate

Generate and Set Up Controller

A controller is quintessential for accumulating standard HTTP requests in a single class; hence, generate a controller for the laravel progress bar ajax example using the given command.

php artisan make:controller Profile

Now, open app/Http/Controllers/Profile.php and update file with the provided code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\StudentProfile;


class Profile extends Controller
{
    public function index()
    {
        return view('profile');
    }
 
    public function store(Request $request)
    {
        $request->validate([
            'file_name' => 'required',
        ]);

       $file_name = time().'.'.request()->file->getClientOriginalExtension();
       $request->file->move(public_path('uploads'), $file_name);
 
       $file = new StudentProfile;
       $file->file_name = $file_name;
       $file->save();
  
       return response()->json(['success'=>'File uploaded successfully.']);
    }
}

Make File Upload Routes

Display file upload widget page, and making the request to the server requires routes, so head over to routes/web.php and define GET and POST routes.

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Profile;


Route::get('/profile', [Profile::class, 'index']);
Route::post('/upload-image', [Profile::class, 'store']);

Create Blade View

Get into the resources/views folder, create profile.php file in here, there after update the resources/views/profile.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 8 Ajax File Upload and Progress Bar Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/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.3.0/jquery.form.min.js"></script>    
</head>

<body>

    <div class="container mt-4" style="max-width: 450px">

        <form id="profile" action="{{ url('/upload-image') }}" enctype="multipart/form-data" method="POST" >
            @csrf

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

            <div class="form-group mb-2">
                <input name="file" type="file" class="form-control">
            </div>

            <div class="form-group">
                <input type="submit" value="Upload" class="btn btn-success">
            </div>
        </form>
    </div>


    <script>
        $(function () {
            $(document).ready(function () {
                $('#profile').ajaxForm({
                    beforeSend: function () {
                        var per = '0';
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var per = percentComplete;
                        $('.progress .progress-bar').css("width", per+'%', function() {
                          return $(this).attr("aria-valuenow", per) + "%";
                        })
                    },
                    complete: function (xhr) {
                        console.log('File uploaded');
                    }
                });
            });
        });
    </script>
</body>

</html>

We created this file upload component to show you how to display progress bar in Laravel using AJAX, moreover we used the latest Bootstrap 5 to design the web page.

Start Laravel App

At last, type command on the command prompt and execute the command to view the app on the browser with the given url.

php artisan serve
http://127.0.0.1:8000/profile

Laravel Ajax Progress Bar

Conclusion

Ajax is the best tool for handling data for file upload and showing the progress of uploading a file in laravel; we are sure you liked this laravel ajax progress bar example.