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

1. Install Laravel and Basic Configurations
2. NPM Configuration
3. Create Controller and Register Route
4. Create Vue Component
5. Register Vue App
6. 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', 'FileUploadController@fileStore');

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:

The topic is over. You can download this project from GitHub. Thank you.