In this article, we will see the laravel 9 ajax file upload with a progress bar. we will learn how to file upload using ajax jquery in laravel 9. You can upload files without page refresh with a progress bar. when uploading any document, image, or file on the server it may take some time to upload but for better understanding and display we will use the progress bar with file upload in laravel 9.
So, let's see jquery ajax file upload with a progress bar and file upload using ajax in laravel 9.
AJAX File Upload With Progress Bar In Laravel 9
Step 1: Install Laravel 9
Step 2: Create Routes
Step 3: Create FileUploadController
Step 4: Create Blade File
Step 5: Run Laravel 9 Application
In this step, we will install the laravel 9 application using the following command.
composer create-project laravel/laravel ajax-file-uploadNow, we will create two routes in the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
/*
|--------------------------------------------------------------------------
| 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(FileUploadController::class)->group(function(){
Route::get('file-upload', 'index');
Route::post('file-upload', 'store')->name('file.upload');In this step, we will create FileUploadController and creates a "documents" folder in the public folder. in this folder, we will store all the files.
app/Http/Controllers/FileUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileUploadController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('file_upload');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'file' => 'required',
]);
$file_name = time().'.'.request()->file->getClientOriginalExtension();
request()->file->move(public_path('documents'), $file_name);
return response()->json(['success'=>'You have successfully upload file.']);
}
}
In this step, we will create the file_upload.blade.php file. So, create a blade file and add the code in this file.
resources/views/file_upload.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 9 Ajax File Upload With Progress Bar - Websolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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">Ajax File Upload with Progress Bar in Laravel 9 - Websolutionstuff</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>
Now, run the laravel 9 jquery ajax file upload with the progress bar application.
php artisan serveYou might also like:
- Read Also: How To File Upload Using Node.js
- Read Also: File Upload With Progress Bar In Angular 13
- Read Also: How To Validate Upload File Type Using Javascript
- Read Also: Drag and Drop File Upload Using Dropzone js in Laravel 9
