Laravel 7 Ajax File Upload with Progress Bar

Laravel 7 Ajax File Upload with Progress Bar

Laravel 7 file upload with progress bar tutorial. Here you will learn how to implement progress bar in laravel ajax file uploading app.

A progress bar displays how much time is remaining to upload a file. So this tutorial will guide you on how to upload file with progress bar using ajax in laravel.

This laravel progress bar file upload app looks like in below picture:

laravel ajax file upload with progress bar

Laravel 7 Ajax File Upload with Progress Bar Example Tutorial

Let’s start our laravel file upload with progress bar using jQuery ajax tutorial:

  • Step 1: Install Laravel App For Progress Bar
  • Step 2: Add Database Details
  • 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: Live Demo

Step 1: Install Laravel App For Progress Bar

First of all, open your terminal and run the following command to install or download laravel app for laravel ajax file upload with progress bar app:

cd xampp\htdocs

Then

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

Step 2: Add Database Details

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 a command prompt and run the following command:

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/routes folder and open web.php file. Then update the following routes into your web.php file:

 Route::get('ajax-file-upload-progress-bar', '[email protected]');
 Route::post('store', '[email protected]');

Step 5: Generate Controller by Artisan

In this step, open your terminal and run the following command 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\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 7 Progress Bar File Upload Using Tutorial</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 7 Progress Bar File Upload Using 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

Finally, run the following command to start the development server for your laravel 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  

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

If you want to remove public or public/index.php from URL In laravel, Click Me

Step 8: Live Demo

Click the following live demo button and check live demo of laravel file upload with progress bar using ajax in laravel:

Conclusion

Laravel progress bar file upload using ajax tutorial, you have learned how to upload the file with progress using ajax in laravel app.

Recommended Laravel Posts

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *