Laravel 10 jQuery Ajax File Upload Progress Bar Example

[ad_1]

Laravel 10 ajax file upload with progress bar tutorial. In this tutorial, we will show you how to create ajax progress bar for file uploading in Laravel 10 app.

The progress bar is one of the best ways to show the status of the in-progress operation. In this example, let us learn to create a progress bar using jQuery while uploading a file via AJAX. A file input option is used to choose the file and the file binaries are posted to the server via AJAX

A progress bar displays how much time is remaining to upload a file. So this Ajax File Upload with Progress Bar in Laravel 10 tutorial will shwo you on how to upload file with progress bar using ajax in Laravel 10 app.

Laravel 10 Ajax File Upload Progress Bar Example

  • Step 1 – Install Laravel 10 App
  • Step 2 – Connecting App to Database
  • Step 3 – Create Migration & Model
  • Step 4 – Add Routes
  • Step 5 – Create Controller by Artisan
  • Step 6 – Create Blade View
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel 10 App

First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:

cd xampp\htdocs

Then

composer create-project --prefer-dist laravel/laravel Blog

Step 2 – Connecting App to Database

In this step, Navigate to your downloaded laravel file upload progress bar using ajax app 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 – Create Migration & Model

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 – Create Route For File

In this step, Navigate to the app 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 – Generate Controller by Artisan

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

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 in Laravel 10 tutorial example, you have learned how to upload the file with progress using ajax in Laravel 10 app.

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518