Laravel 10 AJAX File Upload With Progress Bar
In this article, we will see the laravel 10 Ajax file upload with a progress bar. Here, we will learn about how to file upload with a progress bar using Ajax in laravel 10 and laravel 11. when you have a large amount of file size then it takes time to upload on a server.
So, at that time you can display a progress bar with a percentage, so the user can understand how much time is left to upload a file.
So, let's see how to upload a file with a progress bar in laravel 10/11 using Ajax, and how to file upload in laravel 10 and laravel 11 with a progress bar.
Step 1: Install Laravel 10/11
In this step, we will install the laravel 10 application using the following command.
composer create-project laravel/laravel laravel-10-ajax-file-upload
Step 2: Create Routes
Then, we will create a route into the web.php file. So, add the following code to that file.
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
Now, we will create FileController using the following command.
php artisan make:controller FileControllerapp/Http/Controllers/FileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class FileController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('fileUpload');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): JsonResponse
{
$request->validate([
'file' => 'required',
]);
$fileName = time().'.'.request()->file->getClientOriginalExtension();
request()->file->move(public_path('files'), $fileName);
return response()->json(['success'=>'File Upload Successfully.']);
}
}
Step 4: Create Blade File
In this step, we will create a fileUpload.blade.php file. So, add the following HTML code to that file.
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 10/11 AJAX File Upload With Progress Bar - Techsolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<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-5" style="max-width: 900px">
<div class="bg-dark p-4 text-center rounded-3 mb-2">
<h2 class="text-white m-0">Laravel 10 and Laravel 11 AJAX File Upload With Progress Bar - Techsolutionstuff</h2>
</div>
<!-- Starting of successful form message -->
<div class="row">
<div class="col-12">
<div class="alert alert-success success__msg bg-dark" style="display: none; color: white;" role="alert">
Uploaded File successfully.
</div>
</div>
</div>
<!-- Ending of successful form message -->
<div class="card bg-transparent border rounded-3 mb-5 p-5">
<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-dark" 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="Upload" class="btn btn-dark">
</div>
</form>
</div>
</div>
<script>
$(function () {
$(document).ready(function () {
var message = $('.success__msg');
$('#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');
message.fadeIn().removeClass('alert-danger').addClass('alert-success');
message.text("Uploaded File successfully.");
setTimeout(function () {
message.fadeOut();
}, 2000);
form.find('input:not([type="submit"]), textarea').val('');
var percentage = '0';
}
});
});
});
</script>
</body>
</html>
Output:
You might also like:
- Read Also: How To Install Yajra Datatable In Laravel 9
- Read Also: Laravel 9 Upload Large CSV File Using Queue
- Read Also: Laravel 10 Store JSON Data In Database Example
- Read Also: How To Create AJAX CRUD Operation In Laravel 10
