In this article, we will see 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. 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 using Ajax, how to file upload in laravel 10 with a progress bar, how to Ajax file upload in laravel 10, and how to file upload in laravel 10.
In this step, we will install laravel 10 application using the following command.
composer create-project laravel/laravel laravel-10-ajax-file-upload
Then, we will create 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');
});
Now, we will create FileController using the following command.
php artisan make:controller FileController
app/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.']);
}
}
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 AJAX File Upload With Progress Bar - Techsolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 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: