Uploading Data to an api endpoint using Vue Resource and FormData Web Api

imageUpload.vue

<template>
  <div>
    <input type="file" @change="avatarChange" class="uploadIcon">
  </div>
</template>


<script>

    export default {
        data: function () {
            return {
                avatar: ''
            }
        },
            
        methods: {
            avatarChange: function (e) {
                // Fetch Data from input
                let files = e.target.files || e.dataTransfer.files;
                // Set files array at position 0 to local state data
                this.avatarFiles = files[0]
            },
            
            updateAvatar: function () {
                // Create FromData 
                let data = new FormData();
                // Append file to Formdata
                data.append('upload_avatar', this.avatarFiles);
                
                // Call API Endpoint and pass formdata to it
                this.$http.post('API ENDPOINT URL', data).then(function(response) {
                    console.log(response);
                }).catch(function(error) {
                    console.log(error);
                });
            }
        }
    }
</script>