Skip to content

Instantly share code, notes, and snippets.

@c0depanda
Last active Feb 7, 2017
Embed
What would you like to do?
Uploading Data to an api endpoint using Vue Resource and FormData Web Api
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment