Uploading files is a common feature in web applications. In this guide, we will walk through implementing file upload functionality using Laravel (Backend) and Vue.js (Frontend). Laravel will handle the server-side file storage, while Vue.js will provide a smooth client-side experience.
Prerequisites
- Basic knowledge of Laravel and Vue.js.
- Laravel installed (composer create-project laravel/laravel myapp).
- Vue.js integrated with Laravel.
- Axios for handling HTTP requests.
Step 1: Setting Up Laravel Backend
Install Laravel
If you haven't already installed Laravel, use:
composer create-project laravel/laravel myapp
Move into the project directory:
cd myapp
Create File Upload Controller
Run the following command to generate a new controller:
php artisan make:controller FileUploadController
Open app/Http/Controllers/FileUploadController.php and modify it as follows:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class FileUploadController extends Controller
{
public function upload(Request $request)
{
$request->validate([
'file' => 'required|mimes:jpg,jpeg,png,pdf|max:2048'
]);
if ($request->hasFile('file')) {
$path = $request->file('file')->store('uploads', 'public');
return response()->json(['message' => 'File uploaded successfully', 'path' => $path]);
}
return response()->json(['error' => 'No file uploaded'], 400);
}
}
Define API Route
Open routes/api.php and add:
use App\Http\Controllers\FileUploadController;
Route::post('/upload', [FileUploadController::class, 'upload']);
Configure Storage
Run the following command to create a symbolic link for public access:
php artisan storage:link
Step 2: Setting Up Vue.js Frontend
Install Vue and Dependencies
Inside the Laravel project, install Vue.js:
npm install vue axios
Create File Upload Component
Inside resources/js/components/UploadComponent.vue, add:
<template>
<div>
<input type="file" @change="handleFileUpload" />
<button @click="submitFile">Upload</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null
};
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[0];
},
async submitFile() {
let formData = new FormData();
formData.append('file', this.file);
try {
const response = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
alert(response.data.message);
} catch (error) {
alert('File upload failed');
}
}
}
};
</script>
Register Component in Vue App
Modify resources/js/app.js to include the component:
import { createApp } from 'vue';
import UploadComponent from './components/UploadComponent.vue';
const app = createApp({});
app.component('upload-component', UploadComponent);
app.mount('#app');
Compile Assets
Run:
npm run dev
Step 3: Testing the File Upload
- Start the Laravel backend:
php artisan serve
- Open your Laravel frontend in the browser where Vue is integrated.
- Use the file input to select a file and click upload.
- The file should be stored in storage/app/public/uploads.
Top comments (0)