In this article, we will see the laravel 9 vue 3 image upload example. Here we will learn vue 3 image upload using vite in laravel 9. Also, we will use laravel breeze, inertia js, vite, and tailwind CSS to create a vue js image upload example in laravel 9.
Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. Vite has replaced Laravel Mix in new Laravel installations.
So, let's see laravel vue image upload and image upload in vue js laravel 9.
Vue 3 Image Upload Using Vite In Laravel 9
Step 1: Install Laravel 9
Step 2: Create Auth with Breeze
Step 3: Create Model and Migration
Step 4: Create Routes
Step 5: Create Controller
Step 6: Create Vue Page
Step 7: Run Vue Laravel Application
In this step, we will install the laravel 9 application using the following command.
composer create-project laravel/laravel vue-laravel-image-uploadNow, we will install breeze using the composer command.
composer require laravel/breeze --devAfter installing laravel breeze, we will create a login, and register using the vue js.
php artisan breeze:install vueNow, we will install the node package using the following command.
npm installRun vite using the following command.
npm run devAlso, we will migrate the default table into the database using the following command.
php artisan migrateIn this step, we will create migration and add fields in migration. Also, we will create a model for the same.
php artisan make:migration create_files_tableAdd fields name to the migration file.
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');
}
};Run the below command and migrate the table.
php artisan migrateNow, we will create a File.php model using the following command.
php artisan make:model FileApp/Models/File.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),
);
}
}In this step, we will create routes in the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;
/*
|--------------------------------------------------------------------------
| 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', [FileUploadController::class, 'index'])->name('file.upload');
Route::post('file-upload', [FileUploadController::class, 'store'])->name('file.upload.store');Now, we will create FileUploadController. Also, we will create an "uploads" folder in the public folder.
app/Http/Controllers/FileUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Illuminate\Support\Facades\Validator;
use App\Models\File;
class FileUploadController 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();
$file_name = time().'.'.$request->file->extension();
$request->file->move(public_path('uploads'), $file_name);
File::create([
'title' => $request->title,
'name' => $file_name
]);
return redirect()->route('file.upload');
}
}In this step, we will create FileUpload.vue file.
resources/js/Pages/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 - Websolutionstuff
</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>Now, run vue 3 image upload using vite in the laravel 9 application.
php artisan serveRun the following command for vite.
npm run devTo build the application run the following command.
npm run buildOpen the below URL.
http://localhost:8000/file-uploadYou might also like:
- Read Also: How To File Upload In React JS
- Read Also: How To Get Current Date And Time In Vue Js
- Read Also: Vue Js Sweetalert Modal Notification Tutorial
- Read Also: How To File Upload With Progress Bar In PHP
