Laravel 9 Ajax File Upload with Progress Bar Tutorial

Hello artisan,

In this laravel ajax file upload with a progress bar tutorial, I will show you how to upload files using an ajax request in the laravel 9 application. I will show you step by step process and I will share complete source code with you. I will use the beforeSend ajax request property to show the progress bar and I will close the progress bar using the complete ajax property.

From this laravel 9 ajax file upload tutorial, you will learn how to works laravel 9 upload image with progress bar. If you don't know about laravel 9 file upload with progress bar then I will give a simple example with a solution. I will help you to give an example of laravel 9 ajax file upload with progress bar. you will learn laravel 9 file upload progress bar from this tutorial.

We need a progress bar when we upload a large file to the server. In this example, I will show you how to upload files with a progress bar. We will display a progress bar with a percentage, so the client can understand how much time is left to upload a file.

Step 1: Install Laravel

This step is not required; but, if you have not created the laravel app, then we can go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Add Routes

In the first step, we will add new two routes. One for display view and we will write jquery code in the view file. In the Second step, we will create a POST route for file upload.

routes/web.php

use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FileController;
  
/*
|--------------------------------------------------------------------------
| 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::controller(FileController::class)->group(function(){
    Route::get('file-upload', 'index');
    Route::post('file-upload', 'store')->name('file.upload');
});

Read also: Upload Large CSV File using Queue Job Batching in Laravel

Step 3: Create Controller

In the second step, we need to create a FileController controller with index() and store(). you need to create a "files" folder in the public folder. we will store all files in that folder. just create a new controller and put bellow code on it:

app/Http/Controllers/FileController.php

namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class FileController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('fileUpload');
    }
   
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'file' => 'required',
        ]);
   
        $fileName = time().'.'.request()->file->getClientOriginalExtension();
   
        request()->file->move(public_path('files'), $fileName);
   
        return response()->json(['success'=>'You have successfully upload file.']);
    }
}

Step 4: Create Blade File

In this Last step, we require to create a fileUpload.blade.php file and write code for jquery and show you with progress bar. So you have to simply add the bellow code on the following path:

resources/views/fileUpload.blade.php

Read also: Laravel 9 Ajax CRUD Tutorial Example

Hope it can help you.