anonymouse703's avatar

New update image not sent in request in vue js

Hello guys, I don't understand this kind of bug or maybe I do it wrong. When I edit a record in the modal input text are being updated but not the input file

When I upload the image to be updated the console.log is given me the right image but when I console the response console.log(response) the old image was sent.

I tried to put watcher but still the old image is sent and not the new one in the request

this is the code.

watch:{
      image:function(val){
        this.image = val;
      }
      
    },
data(){
	return{
	image: null
	form: new Form({
          news_image: '',
        }),
}
},
imageSelected(e){
        this.image = e.target.files[0];

        let reader = new FileReader();
        reader.readAsDataURL(this.image);
        reader.onload = e => {
          this.imagepreview = e.target.result;
        };
      },

updateNews(){

      let newsData = new FormData();
      newsData.append('news_image',this.image);

      console.log(this.image); //this is the image

      this.form.put('api/news/'+this.form.id ,newsData)
          .then((response)=>{
              console.log(response); //news_image here is the old image
              swal.fire({
                icon: 'success',
                title: 'News updated successfully'
              })

              this.getNewsList();

              $('#add_news_modal').modal('hide');
          })
          .catch(()=>{
            console.log("Error.....")
          })
      }
0 likes
5 replies
kkhicher1's avatar

You need to send _method with update.

formData.append('_method', 'PUT');
kkhicher1's avatar

If you are using Laravel...

and send a post request instead of this.form.put

anonymouse703's avatar
anonymouse703
OP
Best Answer
Level 6

@kkhicher1 is this the right way sir?

 let newsData = new FormData();
      formData.append('_method','PUT');
      newsData.append('news_image',this.image);

axios.put('api/news'+this.form.id,'NewsData)
.then((response)=>{
              console.log(response); //news_image here is the old image
              swal.fire({
                icon: 'success',
                title: 'News updated successfully'
              })

              this.getNewsList();

              $('#add_news_modal').modal('hide');
          })
          .catch(()=>{
            console.log("Error.....")
          })
      }
kkhicher1's avatar

ya its right but you dont need to add _method and axios.put both to PUT http verb. You use only _method when using larave with laravel and use axios.post

Please or to participate in this conversation.