article

Saturday, July 16, 2022

Laravel 9 Upload File using Jquery Ajax with Progress Bar

Laravel 9 Upload File using Jquery Ajax with Progress Bar

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//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
Posted by ednalan at 2:01 AM . Under .

Related Post