In this article, we will learn how to upload a file with a progress bar in Laravel 8. Here we will create a view, controller, and model, and simple javascript code for the progress bar then we will set the routes for our view blade files.


Follow some steps to upload a file with migrations in laravel 8:


Step 1:

Create view file and put following code for creating fill upload file:


<!DOCTYPE html>
<html>
    <head>
        <title>Laravel 8 Ajax File Upload with Progress Bar</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <style>

            body{
                background: #ccc;
            }

            form{
                background: #fff;
                padding: 20px;
            }

            .progress { 
                position:relative;
                width:100%;
            }
            .bar { 
                background-color: #00ff00;
                width:0%;
                height:20px;
            }
            .percent {
                position:absolute;
                display:inline-block; 
                left:50%;
                color: #040608;
            }
        </style>
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-8 offset-md-2">

                    <form method="POST" action="{{url('upload')}}" enctype="multipart/form-data">

                        <h4>Laravel 8 Ajax File Upload with Progress Bar</h4>
                        @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-dark btn-lg col-12">
                        </div>
                    </form>
                </div>
            </div>
        </div>
       <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>
        <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 + "/" + "upload-form";
                        }
                    });
                });
            });
        </script>
    </body>
</html>


Step 2:

Generate Controller UploadFileController via artisan command


php artisan make:controller UploadFileController


Step 3:

UploadFileController.php, this is our controller file and will automatically generate in the following directory

app/Http/Controllers/
┗ UploadFileController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
//include post mirgration
use App\Models\Post;

class UploadFileController extends Controller {

    public function index() {
        return view('upload-form');
    }

    public function upload(Request $request) {
        $request->validate([
            'file' => 'required',
        ]);



        $title = time() . '.' . request()->file->getClientOriginalExtension();
        $request->file->move(public_path('uploads'), $title);



        $storeFile = new Post;

        print_r($storeFile);
        $storeFile->title = $title;
        $storeFile->save();

        return response()->json(['success' => 'File Uploaded Successfully']);
    }

}


Step 4:

Create Migration & Model


  php artisan make:model Post -m


Step 5:

Navigate to database/migrations folder and open create_posts_table.php


<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up() {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();

            //add title 
            $table->string('title');

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down() {
        Schema::dropIfExists('posts');
    }

}


Step 6:

Run the following command to migrate the table into your select database:


 php artisan migrate


Step 7:

make the routes of our controller

routes/
┗ web.php

<?php

use Illuminate\Support\Facades\Route;

//custom controllers
use App\Http\Controllers\UploadFileController;


Route::get('/', function () {
    return view('welcome');
});


//call the controller and its method
Route::get('/upload-form', [UploadFileController::class, 'index']);
Route::any('/upload', [UploadFileController::class, 'upload']);


Step 8:

Open command window and run the server


php artisan serve


Step 9:

your browser and navigate the following URLs into it:


http://127.0.0.1:8000/upload-form


Output:





Note: all your file will be uploaded here

public/
┣ uploads/
┃ ┣ 1612384804.png

If your project doesn't have an uploads directory, you can create an inside public folder. see the above directory structure