Laravel - Vue JS File Upload Example

August 4, 2018 | Category : Laravel 5.6 Vue.js Laravel 5.5 Laravel 5 Ajax Laravel PHP

In this artical, i will let you know how to create file uploading with vue js in laravel 5.6 application. Here you will find step by step tutorial of file upload using vue.js in laravel.

Here, we will create one post route for file upload and then create one controller. We will write file upload code on controller method. Then after we will make setup for vue js and write component code. We will send file object using axios POST request. So just follow few step and then get full example:

Step 1 : Install Laravel

first of all, we will install Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Route

In second 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','ImageController@formSubmit');

Step 3: Create Controller

in this step, now we have create ImageController with formSubmit methods, in this method we will write code of store file on server. So let's create controller:

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller

{

/**

* success response method.

*

* @return \Illuminate\Http\Response

*/

public function formSubmit(Request $request)

{

$imageName = time().'.'.$request->image->getClientOriginalExtension();

$request->image->move(public_path('images'), $imageName);

return response()->json(['success'=>'You have successfully upload image.']);

}

}

Step 4: Create NPM Configuration

Here, we have to first add setup of vue js and then install npm, so let's run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Step 5: Write Vue JS and Components Code

In this step, we will write code on app.js and then we will create vue js components, So let's create both file and put bellow code:

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({

el: '#app'

});

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 Image Upload - ItSolutionStuff.com</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>Image:</strong>

<input type="file" class="form-control" v-on:change="onImageChange">

<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: '',

image: '',

success: ''

};

},

methods: {

onImageChange(e){

console.log(e.target.files[0]);

this.image = 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('image', this.image);

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 5.6 Vue JS Image Upload - 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

Now you can check our example and also check demo and download free code.

I hope you found your best....