Stuck on uploading image by formData - laravel

Question

I have a page that user can change his picture profile, but I'm stuck when I do a submitHandle, because when I try to console.log(formData) it always gives me empty results.
this is my input file of picture profile
<input id="file-upload" type="file" name="fileUpload" class="d-none" #change="fileUpload">
<label for="file-upload">
<img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="`/dashboard/img/author/profile/`+user.avatar"alt="profile img" v-if="!imagePreview">
<img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="imagePreview" alt="profile img" v-if="imagePreview">
<span class="cross" id="remove_pro_pic">
<i class="fas fa-camera"></i>
</span>
</label>
this is the methods
fileUpload(e) {
let selectedImage = e.target.files[0];
this.imageLocation = selectedImage;
console.log(this.imageLocation.name);
let reader = new FileReader();
reader.readAsDataURL(this.imageLocation)
reader.onload = e => {
this.imagePreview = e.target.result;
}
},
and it has results like this,
But when I click the save button to save file, by formData method, it will have empty results.
This is the button update,
<div class="button-group d-flex pt-25 justify-content-start">
<button #click="submitHandle" class="btn btn-primary btn-default btn-squared text capitalize radius-md shadow2">Update details
</button>
</div>
this is the submitHandle methods,
submitHandle() {
e.preventDefault();
var formData = new FormData();
formData.append('image', this.imageLocation);
formData.append('name', this.user.name);
formData.append('username', this.user.username);
formData.append('email', this.user.email);
formData.append('phone', this.user.phone);
formData.append('gender', this.user.gender);
formData.append('birth', this.user.birth);
formData.append('bio', this.user.bio);
formData.append("facebook", this.user.facebook);
formData.append("instagram", this.user.instagram);
console.log(formData);
},
and when on console log,
it is just shown like this,
please anyone, can help me to solve this?
Thank you very much.

Answer 1

Logging FormData
The default toString() of FormData does not log its entries, so it only seems like the FormData is empty.
A quick way to log the entries is to wrap FormData.prototype.entries in an array:
console.log(Array.from(formData.entries()))
const formData = new FormData();
formData.append('image', 'my image');
formData.append('name', 'my name');
formData.append('username', 'my username');
formData.append('email', 'my email');
formData.append('phone', 'my phone');
formData.append('gender', 'my gender');
formData.append('birth', 'my birth');
formData.append('bio', 'my bio');
formData.append("facebook", 'my facebook');
formData.append("instagram", 'my instagram');
console.log(Array.from(formData.entries()));
Sending FormData with axios
axios.patch takes the FormData instance as its second argument:
axios.patch(apiServerUrl, formData)
Note you can easily create the FormData from the given <form> element if all its <input>s have the appropriate name attribute set, as seen in this example:
<template>
<form #submit.prevent="submitHandle">
<label>Profile Image <input type="file" name="image" autocomplete="photo" v-model="imageLocation"></label>
<label>Username <input type="text" name="username" autocomplete="username" v-model="user.username"></label>
<label>Email <input type="email" name="email" autocomplete="email" v-model="user.email"></label>
<label>Phone <input type="tel" name="phone" autocomplete="tel" v-model="user.phone"></label>
<label>Gender <input type="text" name="gender" autocomplete="sex" v-model="user.gender"></label>
<label>Birthdate <input type="date" name="birth" autocomplete="bday" v-model="user.birth"></label>
<label>Bio <textarea type="text" name="bio" v-model="user.bio"></textarea></label>
<label>Facebook <input type="text" name="facebook" v-model="user.facebook"></label>
<label>Instagram <input type="text" name="instagram" v-model="user.instagram"></label>
<button type="submit">Submit</button>
</form>
<pre>{{ response }}</pre>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
response: null,
imageLocation: null,
user: {
username: null,
email: null,
phone: null,
gender: null,
birth: null,
bio: null,
facebook: null,
instagram: null,
}
}
},
methods: {
submitHandle(e) {
const form = e.target
const formData = new FormData(form)
axios.patch('https://httpbin.org/patch', formData)
.then(resp => this.response = resp.data)
}
}
}
</script>
<style>
label {
display: block;
}
</style>
demo