Laravel 9 Vue 3 File Uploading with Progress Bar Example

Laravel 9 , Vue.Js

Nicesnippets

22-07-2022


Laravel 9 Vue 3 File Uploading with Progress Bar Example

Hello Friends,

I am going to explain you example of Laravel 9 Vue 3 File Uploading with Progress Bar Example. you'll learn how to upload file with progress bar using vue js in laravel 9. This tutorial will give you simple example of file upload with progress bar using vue 3 in laravel. it's simple example of laravel 9 vue js image upload with Progress Bar example.

In this tutorial, we will use laravel breeze, inertia js, vite and tailwind css to create vue js image upload with progress bar using laravel api app. we will create "files" table with title and name columns. then we will create one page to create form and list all uploaded files.

Let's see bellow example vue 3 image upload with Progress Bar laravel.

Step 1: Download Laravel


Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app

Step 2: Create Auth with Breeze

Now, in this step, we need to use composer command to install breeze, so let's run bellow command and install bellow library.

composer require laravel/breeze --dev

now, we need to create authentication using the below command. you can create basic login, register and email verification using vue js. if you want to create team management then you have to pass the addition parameter. you can see the below commands:

php artisan breeze:install vue

Now, let's node js package:

npm install

let's run vite, you have to keep start this command:

npm run dev

now, we need to run migration command to create database table:

php artisan migrate

Step 3: Create Migration and Model

Here, we need create database migration for files table and also we will create model for files table.

php artisan make:migration create_files_table

Migration:

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('files', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('files');

}

};

php artisan migrate

now we will create File.php model by using following command:

php artisan make:model File

App/Models/File.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\Casts\Attribute;

class File extends Model

{

use HasFactory;

/**

* The attributes that are mass assignable.

*

* @var array

*/

protected $fillable = [

'title', 'name'

];

/**

* Get the user's first name.

*

* @return \Illuminate\Database\Eloquent\Casts\Attribute

*/

protected function name(): Attribute

{

return Attribute::make(

get: fn ($value) => url('uploads/'.$value),

);

}

}

Step 4: Create Route

In third step, we will create routes for vue js image upload example. so create get and post routes here.

routes/web.php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\FileController;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('file-upload', [FileController::class, 'index'])->name('file.upload');

Route::post('file-upload', [FileController::class, 'store'])->name('file.upload.store');

Step 5: Create Controller

In this step, we will create FileController file and add following code on it.

Files will upload on "uploads" folder in public directory.

app/Http/Controllers/FileController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Inertia\Inertia;

use Illuminate\Support\Facades\Validator;

use App\Models\File;

class FileController extends Controller

{

/**

* Show the form for creating a new resource.

*

* @return Response

*/

public function index()

{

$files = File::latest()->get();

return Inertia::render('FileUpload', compact('files'));

}

/**

* Show the form for creating a new resource.

*

* @return Response

*/

public function store(Request $request)

{

Validator::make($request->all(), [

'title' => ['required'],

'file' => ['required'],

])->validate();

$fileName = time().'.'.$request->file->extension();

$request->file->move(public_path('uploads'), $fileName);

File::create([

'title' => $request->title,

'name' => $fileName

]);

return redirect()->route('file.upload');

}

}

Step 6: Create vue Pages

Here, in this step we will create vue js file for FileUpload.vue

so, let's create it and add bellow code on it.

resources/js/FileUpload.vue

<script setup>

import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';

import BreezeLabel from '@/Components/Label.vue';

import BreezeInput from '@/Components/Input.vue';

import { Head, Link, useForm } from '@inertiajs/inertia-vue3';

defineProps({

files: Array,

});

const form = useForm({

title: '',

file: null

});

const submit = () => {

form.post(route('file.upload.store'));

};

</script>

<template>

<Head title="Dashboard" />

<BreezeAuthenticatedLayout>

<template #header>

<h2 class="font-semibold text-xl text-gray-800 leading-tight">

Laravel 9 Vue 3 Image Upload Example with Vite - Nicesnippets.com

</h2>

</template>

<div class="py-12">

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">

<div class="p-6 bg-white border-b border-gray-200">

<form name="createForm" @submit.prevent="submit">

<div className="flex flex-col">

<div className="mb-4">

<BreezeLabel for="title" value="Title" />

<BreezeInput

id="title"

type="text"

class="mt-1 block w-full"

v-model="form.title"

autofocus />

<span className="text-red-600" v-if="form.errors.title">

{{ form.errors.file }}

</span>

</div>

<div className="mb-4">

<BreezeLabel for="file" value="File" />

<BreezeInput

id="file"

type="file"

class="mt-1 block w-full"

@input="form.file = $event.target.files[0]"

autofocus />

<span className="text-red-600" v-if="form.errors.title">

{{ form.errors.file }}

</span>

</div>

</div>

<div v-if="form.progress" className="w-full bg-gray-200 rounded-full dark:bg-gray-700">

<div className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" :width="form.progress.percentage"> {{ form.progress.percentage }}%</div>

</div>

<div className="mt-4">

<button

type="submit"

className="px-6 py-2 font-bold text-white bg-green-500 rounded"

>

Save

</button>

</div>

</form>

<h1>Uploaded File List:</h1>

<table className="table-fixed w-full">

<thead>

<tr className="bg-gray-100">

<th className="px-4 py-2 w-20">No.</th>

<th className="px-4 py-2">Title</th>

<th className="px-4 py-2">Image</th>

</tr>

</thead>

<tbody>

<tr v-for="file in files">

<td className="border px-4 py-2">{{ file.id }}</td>

<td className="border px-4 py-2">{{ file.title }}</td>

<td className="border px-4 py-2">

<img :src="file.name" width="200" />

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</BreezeAuthenticatedLayout>

</template>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Also keep run following command for vite:

npm run dev

If you want to build then you can run following command:

npm run build

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000

After login you need to go here:

http://localhost:8000/file-upload

now it works...

I hope it can help you...