Laravel and VueJS File Upload with Axios
In this article, we are going to learn how to upload file with Vue.js and Laravel. I’m going to Axios to send POST request from Vue to Laravel. So, let’s start:
Table of Contents
- Install Laravel and Basic Configurations
- NPM Configuration
- Create Controller and Register Route
- Create Vue Component
- Register Vue App
- Run and See Output
Step 1 : Install Laravel and Basic Configurations
Each Laravel project needs this thing. That’s why I have written an article on this topic. Please see this part from here: Install Laravel and Basic Configurations.
Step 2 : NPM Configuration
We have to setup Vue and need to install all Vue dependencies using NPM. Let’s install Vue using this command:
php artisan preset vue
Install all Vue dependencies:
npm install
Step 3 : Create Controller and Register Route
We need a controller to store file. Create a controller named FileUploadController using this command:
php artisan make:controller FileUploadController
Now open the controller from app\Http\Controllers
and paste this code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileUploadController extends Controller
{
// function to store file in 'upload' folder
public function fileStore(Request $request)
{
$upload_path = public_path('upload');
$file_name = $request->file->getClientOriginalName();
$generated_new_name = time() . '.' . $request->file->getClientOriginalExtension();
$request->file->move($upload_path, $generated_new_name);
return response()->json(['success' => 'You have successfully uploaded "' . $file_name . '"']);
}
}
Note: Uploaded files will be stored in upload folder under public directory. For live site, please check the proper file permissions.
Let’s create a POST web route for the fileStore(
) function from routes/web.php
:
Route::get('upload_file', function () {
return view('upload');
});
Route::post('store_file', '[email protected]');
Step 4 : Create Vue Component
Navigate to resources/assets/js/components
folder and create a filed called FileUpload.vue. In this file, we are going to make file upload form and call the store_file route with axios. Here’s the full code of this component:
<template>
<div class="container" style="margin-top: 50px;">
<div class="text-center">
<h4>File Upload with VueJS and Laravel</h4><br>
<div style="max-width: 500px; margin: 0 auto;">
<div v-if="success !== ''" class="alert alert-success" role="alert">
{{success}}
</div>
<form @submit="submitForm" enctype="multipart/form-data">
<div class="input-group">
<div class="custom-file">
<input type="file" name="filename" class="custom-file-input" id="inputFileUpload"
v-on:change="onFileChange">
<label class="custom-file-label" for="inputFileUpload">Choose file</label>
</div>
<div class="input-group-append">
<input type="submit" class="btn btn-primary" value="Upload">
</div>
</div>
<br>
<p class="text-danger font-weight-bold">{{filename}}</p>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component successfully mounted.')
},
data() {
return {
filename: '',
file: '',
success: ''
};
},
methods: {
onFileChange(e) {
//console.log(e.target.files[0]);
this.filename = "Selected File: " + e.target.files[0].name;
this.file = e.target.files[0];
},
submitForm(e) {
e.preventDefault();
let currentObj = this;
const config = {
headers: {
'content-type': 'multipart/form-data',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
}
}
// form data
let formData = new FormData();
formData.append('file', this.file);
// send upload request
axios.post('/store_file', formData, config)
.then(function (response) {
currentObj.success = response.data.success;
currentObj.filename = "";
})
.catch(function (error) {
currentObj.output = error;
});
}
}
}
</script>
Now open resources/assets/js/app.js
and include the FileUpload.vue component like this:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('file-upload-component', require('./components/FileUpload.vue').default);
const app = new Vue({
el: '#app',
});
Step 5 : Register Vue App
In this step, we will create a blade view file to define Vue’s app. Go to resources/views
folder and make a file named upload.blade.php. Then copy-paste the below code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>File Upload with VueJS and Laravel - Mynotepaper.com</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<file-upload-component></file-upload-component>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Step 6 : Run and See Output
Run this command to update app.js:
npm run dev
You can also run npm run watch
to update the Vue file instantly.
Now run the Laravel project and go to upload_file
the route to see the output.
The output:

Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)