article

Friday, November 19, 2021

Vue.js Axios upload file with PHP

Vue.js Axios upload file with PHP

Download or Include 

axios
https://github.com/axios/axios

Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

VueJS 
https://vuejs.org/v2/guide/installation.html

CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
//index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vue.js Axios upload file with PHP</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="container" id="vuejsuploadapp">
       <br />
       <h3 align="center">Vue.js Axios upload file with PHP</h3>
       <br />
       <div v-if="successAlert" class="alert alert-success alert-dismissible">
          <a href="#" class="close" aria-label="close" @click="successAlert=false">×</a>
          {{ successMessage }}
       </div>
 
       <div v-if="errorAlert" class="alert alert-danger alert-dismissible">
          <a href="#" class="close" aria-label="close" @click="errorAlert=false">×</a>
          {{ errorMessage }}
       </div>
        
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                  <div class="col-md-6">
                   <h3 class="panel-title">Upload File</h3>
                  </div>
                  <div class="col-md-6" align="right"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                  <div class="col-md-4" align="right">
                   <label>Select Image</label>
                  </div>
                  <div class="col-md-4">
                   <input type="file" ref="file" />
                  </div>
                  <div class="col-md-4">
                   <button type="button" @click="btnUpload" class="btn btn-success">Upload Image</button>
                  </div>
                </div>
             <br />
             <br />
             <div v-html="uploadedImage" align="center"></div>
            </div>
        </div>
  </div>
<script>
var application = new Vue({
     el:'#vuejsuploadapp',
     data:{
        file:'',
        successAlert:false,
        errorAlert:false,
        uploadedImage:'',
     },
     methods:{
        btnUpload:function(){
            application.file = application.$refs.file.files[0];
 
            var formData = new FormData();
 
            formData.append('file', application.file);
 
            axios.post('upload.php', formData, {
                header:{
                    'Content-Type' : 'multipart/form-data'
                }
            }).then(function(response){
                if(response.data.image == '') {
                     application.errorAlert = true;
                     application.successAlert = false;
                     application.errorMessage = response.data.message;
                     application.successMessage = '';
                     application.uploadedImage = '';
                }else{
                 application.errorAlert = false;
                     application.successAlert = true;
                     application.errorMessage = '';
                     application.successMessage = response.data.message;
                     var image_html = "<img src='"+response.data.image+"' class='img-thumbnail' width='500' />";
                     application.uploadedImage = image_html;
                     application.$refs.file.value = '';
                }
           });
        
      }
    },
});
</script>
 </body>
</html>
upload.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//upload.php
<?php
$image = '';
if(isset($_FILES['file']['name']))
{
    $image_name = $_FILES['file']['name'];
    $valid_extensions = array("jpg","jpeg","png");
    $extension = pathinfo($image_name, PATHINFO_EXTENSION);
    if(in_array($extension, $valid_extensions)){
        $upload_path = 'upload/' . time() . '.' . $extension;
        if(move_uploaded_file($_FILES['file']['tmp_name'], $upload_path)){
           $message = 'Image Succesfully Uploaded';
           $image = $upload_path;
        }else{
           $message = 'There is an error while uploading image';
        }
    }else{
      $message = 'Only .jpg, .jpeg and .png Image allowed to upload';
    }
}else{
    $message = 'Select Image';
}
 
$output = array(
 'message'  => $message,
 'image'   => $image
);
 
echo json_encode($output);
?>

Posted by ednalan at 9:45 PM . Under .

Related Post