unable to properly upload image using wordpress rest-api and axios

Question

I can't figure out how to properly upload an image captured using react-native-image-picker to wordpress using axios and wordpress rest api. I am not understanding how to use form-data and base64 encoding and how all of these parts work together. The image/file is being uploaded to wordpress but it shows as gray object meaning it is not properly uploaded in the correct format. Any help is much appreciated.

image captured has the following object

{
data:"....base64 encoding here...",
fileName:'IMG_20190906_000319.jpg',
fileSize:144446,
height:1280,
path:"/storage/emulated/0/DCIM/Camera/IMG_20190906_000319.jpg"
type:'image/jpeg',
uri:"content://com.google.android.apps.photos.contentprovider/-1/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F22/ORIGINAL/NONE/1498980218"
}

This is how I send my Post request

let url = weburl + `/wp/v2/media/`;
let imageCapture = image;
let formData = new FormData();
//I am sending the whole image object. I also tried to send image.data but all without success
formData.append('image',imageCaptured);

 axios.post( url,formData, {
      headers: {
        "Content-Disposition": `multipart/form-data; filename="city.jpg"`,
        'Content-Type': 'image/jpeg',
        "Authorization": 'Bearer ' + token
      }
    })

how the image in wordpress appears

@Ziyo thanks. it worked although initially I was trying not to get into a new module but seems this module does a lot of heavy lifting for us. — houssameddin

houssameddin houssameddin · Accepted Answer · 2019-09-06T20:45:30

I ended up using rn-fetch-blob as @ziyo suggested.

  RNFetchBlob.fetch( 'POST',url, {
    'Content-Type' : 'application/octet',
     "Content-Disposition": `application/octet; filename="image.jpg`,
      "Cache-Control" : "no-store",
       "Authorization": 'Bearer ' + token
  },image.data
    ).then(function(data) {
      console.log(data)
    })

unable to properly upload image using wordpress rest-api and axios

1 Answers