Laravel Vue JS File Upload With Code Examples

 

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, laravel 8 and laravel 9.

If you are a developer, then you know about in today's web application. File upload is a primary task for every web app. The client always wants to file upload in his web application like a profile picture, product xls etc. But if you are working with vue.js then you think how it can be possible. But no issue, We will do it from scratch like install laravel, npm, vue, axios etc.

In this example, we will create a post route with a controller. In the controller method, we will write code of file upload. Then we will install npm, vue and axios. After that, we will write a code of the component. In a component file, we will write code of file upload using vue js. After finish all the step, you will get a layout like as below screenshot and you can also download code and check the demo.

Preview:

Step 1 : Install Laravel 5.8 Project

first of all, we will install Laravel 5.8 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: Create 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','FileController@formSubmit');

Read Also: Laravel Vue JS Pagination Example with Demo

Step 3: 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(['success'=>'You have successfully upload file.']);
    }
}

Step 4: 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 on app.js and Components

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 File Upload Example - 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>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){
                console.log(e.target.files[0]);
                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:

 

Read More

Vue JS call a function on load With Code Examples

 

If you want to call a function on page load in vue js then in this example i will show you how to trigger function on page load in vue js. we will run function on page load vue application.

we mostly require to call method on page load in our application. so you want to call function in vue.js app then you can do it using created option in vue js. So i will give full example so you can check it out.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS call function on load Example - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  
<div id="app">
  
  {{ message }}
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods:{
            myFunctionOnLoad: function() {
            console.log('call on load...');
        }
      },
      created: function(){
        this.myFunctionOnLoad()
      }
    })
  
</script>
  
</body>
</html>

 

Read More

Vue JS Get Array Length Or Object Length With Code Examples

 

If you don't know how to get array length in vue js then i will give example for vue js get object length. if you worked with javascript jquery then you know you can get array length by variable.length so same way you can get array length or object length in vue js application.

I give you bellow very simple example so you can understand how to getting array length or object length in vue js code.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Array Length Or Object Length Example - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
<div id="app">
   
  <ul id="exampleApp">
    <li v-if="myArray.length">Object Length = {{ myArray.length }}</li>
    <li v-for="value in myArray">
      {{ value.category }}
    </li>
  </ul>
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      data: {
        myArray: [
          { category: 'Laravel' },
          { category: 'PHP' },
          { category: 'Codeigniter' }
        ]
      }
    })
  
</script>
  
</body>
</html>

Output:

Object Length = 3
Laravel
PHP
Codeigniter

 

Read More

Vue JS Convert String to Array | Vue JS Split String With Code Examples

 Today i will show you how to convert string to array using split() in vue js. i will give simple example of split string with space, comma, semicolon etc in vuejs.

If you worked with javascript then you know split() and how it use. The split() method is used to split the string into an array of the substring and returns a new collection array. you can see bellow following syntax:

myArray.split(separator);

bellow i gave you simple example of convert string into an array with space. i will also show you output of array, so you can understand how it works.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Convert String to Array | Vue JS Split String Example - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  
<div id="app">
   
  <p>String : {{ myString }}</p>
  <p>Array : {{myResult}}</p>
  <button @click="clickFunction()">Click Me</button>
   
</div>
  
<script type="text/javascript">
   
    var app = new Vue({
      el: '#app',
      data: {
        myString: "This is coderfunda.blogspot.com" ,
        myResult: ''
      },
      methods:{
        clickFunction: function () {   
            this.myResult = this.myString.split(" ");
        }
      }
    })
   
</script>
   
</body>
</html>

Output:

String : This is coderfunda.blogspot.com
  
Array : [ "This", "is", "coderfunda.blogspot.com" ]

Read More