Laravel/Vue - PUT Method with Axios - Cannot update image file - laravel

Question

I'm trying to update an icon with axios and put method on a laravel/vue app.
I'm always getting the error : icon must be an image.
I've correctly inserted my headers : content-type": "multipart/form-data" in the config variable.
async updateSolution({
commit
}, payload) {
const id = payload.id;
const config = payload.config;
const solution = payload.data;
try {
console.log(solution.get('icon'));
const res = await this.$axios.$put(`/api/solutions/${id}`, {
config,
name: solution.get('name'),
description: solution.get('description'),
icon: solution.get('icon'),
});
commit('UPDATE_SOLUTION', res);
} catch (error) {}
},
If I do a console.log(solution.get('icon') here is the output :
File {name: 'img.png', lastModified: 1660039998282, lastModifiedDate: Tue Aug 09 2022 12:13:18 GMT+0200 (Central European Summer Time), webkitRelativePath: '', size: 9026, …}
lastModified: 1660039998282
lastModifiedDate: Tue Aug 09 2022 12:13:18 GMT+0200 (Central European Summer Time) {}
name: "img.png"
size: 9026
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File
So it understand well that there is a image file in actions.js vuex file.
Why does it tell me that this is not an image ?
I heard about the workaround with _method parameter, so I've first tried adding the method in formData object :
async editSolution() {
const result = await this.$refs.observer.validate();
this.message = null;
this.errors = [];
let formData = new FormData();
const id = this.id;
const config = {
headers: {
"content-type": "multipart/form-data",
},
};
formData.append("name", this.solutionName);
formData.append("description", this.solutionDesc);
formData.append("icon", this.solutionIcon);
formData.append("_method", "PUT");
this.$emit("edit-data", id, formData, config);
},
Here the output is :
The POST method is not supported for this route.
So the parameter is not recognized apparently.
I also tried to add the parameter in the actions.js vuex file directly.
const res = await this.$axios.$post(`/api/solutions/${id}`, {
_method: 'PUT',
config,
name: solution.get('name'),
description: solution.get('description'),
icon: solution.get('icon'),
})
It gives me the same error than using this.$axios.$put() call :
icon must be an image.
Thanks for your help,