If you are making a system for uploading files in the Laravel application. And you want that a progress bar should also be visible when the file is being uploaded. So that it can be known that the percentage of the file has been uploaded.
So, In this tutorial, you will learn how to create progress bar while uploading file to MYSQL database in Laravel 10 project using jQuery Ajax.
Laravel 10 Ajax File Upload with Progress Bar Tutorial Example
To upload a file with a progress bar using jQuery ajax in Laravel 10, you can follow these steps:
- Step 1 – Create New Laravel 10 Project
- Step 2 – Setup Database with Laravel Project
- Step 3 – Creating Files For Model and Migration
- Step 4 – Define Routes
- Step 5 – Create Controller File
- Step 6 – Create Blade View File
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Create New Laravel 10 Project
Firstly, open your terminal or command prompt.
Then execute the following commands into it to download and install the new Laravel 10 app on your system:
cd xampp\htdocs Then composer create-project --prefer-dist laravel/laravel Blog
Step 2 – Setup Database with Laravel Project
Once you have installed laravel project in your server. Now you need to setup database with this.
So, visit your laravel project root directory and open .env file. Then add your database details in .env file, as follow:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Step 3 – Creating Files For Model and Migration
In this step, open again your terminal/command line/ command prompt. And execute the following command into it to create model and migration files for your laravel applications:
php artisan make:model Doc -m
This command will create one model name Doc.php and as well as one migration file for the Docs table.
Then Navigate to database/migrations folder and open create_docs_table.php. Then update the following code into create_docs_table.php:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateDocsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('docs', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('docs');
}
}
After that, run the following command to migrate the table into your select database:
php artisan migrate
Step 4 – Define Routes
In this step, visit routes directory and open web.php file.
Then update the following routes into your web.php file:
use App\Http\Controllers\UploadFileController;
Route::get('ajax-file-upload-progress-bar', [UploadFileController::class, 'index']);
Route::post('store', [UploadFileController::class, 'store']);
Step 5 – Create Controller File
In this step, execute the following command on terminal to create ajax file upload controller file:
php artisan make:controller UploadFileController
This command will create a controller named UploadFileController.php file.
Next, Navigate to app/http/controllers/ folder and open UploadFileController.php. Then add the following file uploading methods into your UploadFileController.php file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Doc;
class UploadFileController extends Controller
{
public function index()
{
return view('progress-bar-file-upload');
}
public function store(Request $request)
{
$request->validate([
'file' => 'required',
]);
$title = time().'.'.request()->file->getClientOriginalExtension();
$request->file->move(public_path('docs'), $title);
$storeFile = new Doc;
$storeFile->title = $title;
$storeFile->save();
return response()->json(['success'=>'File Uploaded Successfully']);
}
}
Step 6 – Create Blade View File
In this step, create one blade view file named progress-bar-file-upload.blade.php.
Now, navigate /resources/views and create one file name progress-bar-file-upload.blade.php. Then update the following code into your progress-bar-file-upload.blade.php file:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Progress Bar File Upload Using Tutorial Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<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.2.2/jquery.form.js"></script>
<style>
.progress { position:relative; width:100%; }
.bar { background-color: #b5076f; width:0%; height:20px; }
.percent { position:absolute; display:inline-block; left:50%; color: #040608;}
</style>
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header text-center">
<h2>Laravel 10 Progress Bar File Upload Using Ajax Tutorial</h2>
</div>
<div class="card-body">
<form method="POST" action="{{ url('ajax-file-upload-progress-bar') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input name="file" type="file" class="form-control"><br/>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<br>
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var SITEURL = "{{URL('/')}}";
$(function() {
$(document).ready(function()
{
var bar = $('.bar');
var percent = $('.percent');
$('form').ajaxForm({
beforeSend: function() {
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
alert('File Has Been Uploaded Successfully');
window.location.href = SITEURL +"/"+"ajax-file-upload-progress-bar";
}
});
});
});
</script>
</body>
</html>
Step 7 – Run Development Server
Now, execute the following command on terminal to start the development server for your Laravel 10 ajax file with a progress bar app:
php artisan serve If you want to run the project diffrent port so use this below command php artisan serve --port=8080
If you want to remove public or public/index.php from URL In laravel, Click Me
Step 8 – Test This App
Now, open your browser and hit the following URLs into it:
http://localhost:8000/ajax-file-upload-progress-bar OR hit in browser http://localhost/blog/public/ajax-file-upload-progress-bar
Conclusion
Laravel 10 Ajax file upload using Ajax tutorial, you have learned how to upload the file with progress using Ajax in Laravel 10 app.
