Laravel File Upload with Progress Bar Example

In this post, we will learn how to ajax image upload with progress bar in laravel application. Laravel File Upload with Progress Bar

You always did file uploading in a normal way, and you can do it easily. But when you have a large amount of file size, it takes time to upload on a server. Maybe you can’t reduce the time to upload a file or image, but you can display a progress bar with a percentage so the client can understand how much time is left to upload a file.

In this tutorial, we will create two routes with the FileController controller file. When you click on the submit button, fire the jQuery AJAX method, and the upload of the image will show you a progress bar. Let’s follow the steps below to do this example.

Laravel File Upload with Progress Bar Example

Step 1: Install Laravel 12

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Create Routes

In the first step, we will add two new routes. One for displaying the 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

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\FileController;

Route::controller(FileController::class)->group(function(){
    Route::get('file-upload', 'index');
    Route::post('file-upload', 'store')->name('file.upload');
});

Read Also: Laravel 12 Create Blade File using Command Example

Step 3: Create FileController

In the second step, we need to create the FileController controller with index() and store() methods. 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 the code below in it:

app/Http/Controllers/FileController.php

<?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 need to create the fileUpload.blade.php file and write code for jQuery to show you the progress bar. So, you simply have to add the below code at the following path:
Read Full Tutorials From DevScriptSchool