Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

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.

 

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon