Passing an image in axios request in react-native

Question

I am trying to pass an image along with this request, other parameters get sent, but not the image. What way would be better. appApi is an axios instance which I imported.

const update = dispatch => async ({ name, email, phone, photo, Age, Blood, Gender, Height, Weight, id }) => {
      //make api request to update with that info

      // const picture = new FormData()
      // picture.append("picture", {
      //   type: 'image/jpg',
      //   uri: photo,
      //   name: 'profilepic.jpg'
      // });

      // const picture = {
      //   type: 'image/jpg',
      //   uri: photo,
      //   name: 'profilepic.jpg'
      // }
      // console.log(picture)
      const picture = {
        type: 'image/jpg',
        uri: photo,
        name: 'profilepic.jpg'
      }


      const response = await appApi.put(`/userregister/${id}`, { name, email, phone, picture, Age, Blood, Gender, Height, Weight })
      if (response) {
        console.log(response.data)
        navigate("AccountScrn");

      } else {
        dispatch({
          type: "ADD_ERROR",
          payload: 'Unable to update profile, please try again later'
        })
      }
    };

Take a look here: https://stackoverflow.com/questions/39663961/how-do-you-send-images-to-node-js-with-axios — Zydnar, Feb 20 '20 at 08:46

score 0 · Answer 1 · answered Feb 20 '20 at 08:54

you need to make a FormData like so :

const update = dispatch => async ({ name, email, phone, photo, Age, Blood, Gender, Height, Weight, id }) => {
      //make api request to update with that info
      let data = { name, email, phone, photo, Age, Blood, Gender, Height, Weight };
       //notice that your photo must be a file 
      let fd = new FormData();
      Object.keys(data).map(item => {
         fd.append(item , data[item]);
      });


      const response = await appApi.put(`/userregister/${id}`,fd )
      if (response) {
        console.log(response.data)
        navigate("AccountScrn");

      } else {
        dispatch({
          type: "ADD_ERROR",
          payload: 'Unable to update profile, please try again later'
        })
      }
    };

Nothing get sent to the backend – Similoluwa Odeyemi Feb 22 '20 at 13:01 — Similoluwa Odeyemi, Feb 22 '20 at 13:01

score 0 · Answer 2 · answered Feb 20 '20 at 08:58

Using fetch method i had done you can easily cahnge to axios

fetch("/url", {
      method: "POST",
      body: JSON.stringify({ serial_no: "xyz" }),
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.blob())
      .then(file => {
        var outside = URL.createObjectURL(file);
        console.log(outside)
      });

You can use the image as in img tag or you can also download the image

Passing an image in axios request in react-native

2 Answers2