0

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,

2
  • Maybe you can check this stackoverflow.com/questions/54686218/… , that seems to be related to your issue. Commented Aug 19, 2022 at 14:06
  • Thanks @DylanTavares ! I've seen this post but didn't helped me. I tried with client side. I've added information about the problem in the description Commented Aug 19, 2022 at 14:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.