ItSolutionStuff.com

Laravel 9 Ajax File Upload with Progress Bar Tutorial

By Hardik Savani • November 5, 2023
Laravel

Hi Dev,

Here, I will show you how to works laravel 9 upload image with progress bar. if you have question about laravel 9 file upload with progress bar then I will give a simple example with a solution. we 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.

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 then 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 submit button then fire the jquery ajax method and the upload of the image will show you a progress bar. let's follow the below step to do this example.

Step 1: Install Laravel

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

composer create-project laravel/laravel example-app

Step 2: Create Routes

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

routes/web.php

<?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');

});

Step 3: Create FileController

In second step, we need to create FileController controller with index() and store(). you need to create "files" folder in public folder. we will store all files on that folder. just create new controller and put bellow code on 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 require to create fileUpload.blade.php file and we write code for jquery and show you with progress bar. So you have to simply add bellow code on following path:

resources/views/fileUpload.blade.php

<!DOCTYPE html>

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

<head>

<meta charset="utf-8">

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

<title>Laravel Bootstrap 5 Progress Bar Example - ItSolutionStuff.com</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container mt-5" style="max-width: 900px">

<div class="alert alert-primary mb-4 text-center">

<h2 class="display-6">Laravel File Upload with Ajax Progress Bar Example - ItSolutionStuff.com</h2>

</div>

<form id="fileUploadForm" method="POST" action="{{ route('file.upload') }}" enctype="multipart/form-data">

@csrf

<div class="form-group mb-3">

<input name="file" type="file" class="form-control">

</div>

<div class="form-group">

<div class="progress">

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

</div>

</div>

<div class="d-grid mt-4">

<input type="submit" value="Submit" class="btn btn-primary">

</div>

</form>

</div>

<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>

<script>

$(function () {

$(document).ready(function () {

$('#fileUploadForm').ajaxForm({

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');

}

});

});

});

</script>

</body>

</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/file-upload

Output:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 9 Restrict User Access From IP Address Tutorial

Read Now →

Laravel 9 Daily Weekly Monthly Automatic Database Backup

Read Now →

Laravel 9 Generate Sitemap XML File Tutorial Example

Read Now →

How to use Google ReCaptcha V3 in Laravel 9?

Read Now →

How to add Google ReCaptcha V2 in Laravel 9?

Read Now →

Laravel 9 Webcam a Take Photo and Save From Camera Example

Read Now →

Laravel 9 Razorpay Payment Gateway Integration Example

Read Now →

Laravel 9 Stripe Payment Gateway Integration Tutorial

Read Now →

Laravel 9 Has Many Through Eloquent Relationship Example

Read Now →

Laravel 9 Barcode Generator Example

Read Now →

Laravel 9 Google Charts Tutorial Example

Read Now →

Laravel 9 Socialite Login with Facebook Account Example

Read Now →

Laravel 9 REST API with Passport Authentication Tutorial

Read Now →