Laravel 8 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 8 app.

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

Ajax File Upload with Progress Bar in Laravel 8 Tutorial

• Step 1 – Install Laravel 8 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 8 App

First of all, Execute the following command on terminal to install or download laravel 8 app:

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 a command prompt and execute 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 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']);
    }
}

#ajax #laravel #php #web-development #developer