Today, we will learn file upload with laravel and vue js. we will create example of laravel vue axios file upload. we can easily fire post request using axios and pass file object as parameter, so we can store file to server using laravel 5, laravel 6, laravel 7 and laravel 8.
Create Route
In this step, we will create one post route and write file upload code. So, let's add new route on that file.
routes/web.php
Route::post('formSubmit','FileController@formSubmit');
Create FileController
in this step, now we have create FileController with formSubmit methods, in this method we will write code of store file on server. So let's create controller:
app/Http/Controllers/FileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function formSubmit(Request $request)
{
$fileName = time().'.'.$request->file->getClientOriginalExtension();
$request->file->move(public_path('upload'), $fileName);
return response()->json(['status'=>201]);
}
}
Write Component in vue.js
resources/assets/js/components/ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel Vue JS File Upload </div>
<div class="card-body">
<div v-if="success != ''" class="alert alert-success" role="alert">
{{success}}
</div>
<form @submit="formSubmit" enctype="multipart/form-data">
<strong>Name:</strong>
<input type="text" class="form-control" v-model="name">
<strong>File:</strong>
<input type="file" class="form-control" v-on:change="onFileChange">
<button class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data() {
return {
name: '',
file: '',
success: ''
};
},
methods: {
onFileChange(e){
this.file = e.target.files[0];
},
formSubmit(e) {
e.preventDefault();
let currentObj = this;
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
let formData = new FormData();
formData.append('file', this.file);
axios.post('/formSubmit', formData, config)
.then(function (response) {
currentObj.success = response.data.success;
})
.catch(function (error) {
currentObj.output = error;
});
}
}
}
</script>
Step 6: Update welcome.blade.php
At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let's update.
resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<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">
<title>Laravel Vue JS File Upload Example - ItSolutionStuff.com</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
Now you have to run below command for update app.js file:
npm run dev
Make sure you created "upload" folder on your public directory.
