Upload File In VueJs With PHP.

 

In this post we will learn how we can upload a file using the axios package in vuejs. File uploading is one of the important parts of any web application. We will use the axios package as frontend technology and PHP as backend technology to upload a file on the server.

Axios is a javascript library to make http requests from the browser. It is being used for making requests like GET,POST,PUT,DELETE ,etc.

 

In this tutorial I will explain step by step  to create a file upload with vuejs and axios.  So follow the below steps to create a file upload example in vueJs.

 

1. Create Vue App.

First of all we need to create vue app using bellow command.

 vue create fileupload

 

2. Install Axios.

In this step we need to install axios npm package that will allow to make http request.

npm install --save axios vue-axios

 

3. Import Axios.

We need to use Axios package in main.js file of vue js app. So import axios package in main.js file .

src/main.js

import axios from 'axios'

import VueAxios from 'vue-axios'


Vue.use(VueAxios, axios)

 

4. Create Component For File Upload.

Create a component  fileUpload.vue and add below code.

src/component/fileUpload.vue

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <h1>File Upload Example In Vuejs Using PHP</h1>
      <label>File
        <input type="file" id="file" ref="file"/>
      </label>
        <button v-on:click="uploadFile()">Upload</button>
    </div>
  </div>
</template>

<script>

  export default  {   
      data () {
      return {          
          file:''
      }    
    },
    methods: {     

            uploadFile: function(){

                 this.file = this.$refs.file.files[0];                  
                 let formData = new FormData();
                 formData.append('file', this.file);
                 this.$refs.file.value = '';
                this.axios.post('http://localhost/rajesh/api/upload.php', formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then(function (response) {

                    if(!response.data){
                        alert('File not uploaded.');
                    }else{
                        alert('File uploaded successfully.');                        

                    }

                })
                .catch(function (error) {
                    console.log(error);
                 });

            }
    },
    
}
</script>

5 : Add FileUpload Component In App.vue.

<template>
  <div id="app">
      <FileUpload/>
  </div>
</template>

<script>
import FileUpload from './components/fileUpload.vue'
 
      export default {
                 name: 'app',
                       components: {
                             FileUpload
                }
       }
</script>

 

6: Create PHP API.

 

Create Php file with upload folder and put below code. This is an api for uploading a file on server.

 

<?php  
    header('Access-Control-Allow-Origin: *');  
     $filename = $_FILES['file']['name'];
     $allowed_extensions = array('jpg','jpeg','png','pdf');
      $extension = pathinfo($filename, PATHINFO_EXTENSION);
	   if(in_array(strtolower($extension),$allowed_extensions) ) { 	
		  if(move_uploaded_file($_FILES['file']['tmp_name'], "upload/".$filename)){
				echo 1;
		  }else{
			  echo 0;
		  }
	}else{
		echo 0;
	} 
?>

Laravel Multiple File Upload with Progress Bar.

This is the step by step guide to implement file upload in vuejs with PHP.