How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create tables
php artisan make:model FileUpload -m
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model FileUpload -m
Open new migrations
yourproject/database/migrations
laravelproject\database\migrations\create_file_uploads_table.php
//laravelproject\database\migrations\create_file_uploads_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('file_uploads', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('file_uploads');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table
Create tables Model
php artisan make:model FileUpload -m
app/Models/FileUpload.php
//app/Models/FileUpload.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class FileUpload extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
Creating Controller php artisan make:controller ProgressBarController
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller ProgressBarController
change it with the following codes:
laravelproject\app\Http\Controllers\ProgressBarController.php
//laravelproject\app\Http\Controllers\ProgressBarController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\FileUpload;
class ProgressBarController extends Controller
{
public function index()
{
return view('home');
}
public function upload(Request $request)
{
$request->validate([
'file' => 'required',
]);
$name = time().'.'.request()->file->getClientOriginalExtension();
$request->file->move(public_path('uploads'), $name);
$file = new FileUpload;
$file->name = $name;
$file->save();
return response()->json(['success'=>'Successfully uploaded.']);
}
}
Route laravelproject\routes\web.php
//laravelproject\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProgressBarController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/home', [ProgressBarController::class, 'index']);
Route::post('/upload-file', [ProgressBarController::class, 'upload']);
Create Views laravelproject\resources\views\home.blade.php
Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
jQuery Form
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.
https://github.com/jquery-form/form
https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js
//laravelproject\resources\views\home.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 Upload File using Jquery Ajax with Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="alert alert-info mb-4 text-center">
<h2 class="display-6">Laravel 9 Upload File using Jquery Ajax with Progress Bar</h2>
</div>
<form id="fileUploadForm" method="POST" action="{{ url('/upload-file') }}" enctype="multipart/form-data">
@csrf
<div class="form-group mb-3">
<input name="file" type="file" class="form-control">
</div>
<div class="d-grid mb-3">
<input type="submit" value="Submit" class="btn btn-primary">
</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>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> <!--https://github.com/jquery-form/form -->
<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 C:\xampp\htdocs\laravel\laravelproject>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
