System Information
- Strapi Version: 3.6.5
- Operating System: Server ? Ubuntu
- Database: mongodb
- Node Version: unknown
- NPM Version: unknown
- Yarn Version: unknown
I’m trying to upload profile picture to user entries upon creation or updating. previously using formData()
I could append stringfied data, and files like this:
formData.append('files.field', field, field.name)
formData.append('data', JSON.stringify(this.form))
Tried to do so but it didn’t work. Had to basically append every field separately like
formData.append('firstName', this.form.firstName)
formData.append('lastName', this.form.lastName)
Tried appending files after this fields, when I submit everything gets updated except profile picture.
here’s my profilePicture object
"firstName": "John",
"lastName": "Doe",
"profilePicture": {
"id": 41,
"name": "ben-parker-OhKElOkQ3RE-unsplash.jpeg",
"alternativeText": "",
"caption": "",
"width": 449,
"height": 450,
"formats": {
"thumbnail": {
"ext": ".jpeg",
"url": "/uploads/thumbnail_ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3.jpeg",
"hash": "thumbnail_ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3",
"mime": "image/jpeg",
"name": "thumbnail_ben-parker-OhKElOkQ3RE-unsplash.jpeg",
"path": null,
"size": 4.35,
"width": 156,
"height": 156
}
},
"hash": "ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3",
"ext": ".jpeg",
"mime": "image/jpeg",
"size": 27.58,
"url": "/uploads/ben_parker_Oh_K_El_Ok_Q3_RE_unsplash_ab211738d3.jpeg",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"created_at": "2021-11-28T15:11:07.490Z",
"updated_at": "2021-11-28T15:11:07.501Z"
},
and this is how I update user profile
//data
data() {
return {
imagePreview: '',
files: [],
edit: false,
userProfile: {
firstName: '',
lastName: '',
},
password: '',
saveButton: 'disabled',
view: 'userInfo',
confirmation: '',
}
},
//methods
addFile(e) {
var reader
this.files = e.target.files || e.dataTransfer.files
if (!this.files) return
reader = new FileReader()
reader.onload = (e) => {
this.imagePreview = e.target.result
}
reader.readAsDataURL(this.files[0])
},
async updateAllUserInfo(e) {
const formData = new FormData()
let Image = this.imagePreview
formData.append('firstName', this.userProfile.firstName)
formData.append('lastName', this.userProfile.lastName)
formData.append('files.profilePicture', Image)
await this.$strapi.$users
.update(this.$strapi.user.id, formData)
.then((res) => {
this.$strapi.user = res
this.$store.commit('setAndUpdateUser', res)
this.$toast.success('Successfully updated!!')
console.log(res)
})
.catch((error) => {
this.$toast.error('Successfully failed!!')
console.error(error)
})
this.saveButton = 'disabled'
},
Why it doesn’t work for me ?