Pass base64 string in POST call in React Native

Question

I'm trying to pass base64 string which is returned by expo's image picker to POST api call. Following is the code snippet

var { cancelled, uri, base64 } = await ImagePicker.launchCameraAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  base64: true,
});

 const payload = {
    File_String: base64,
  };

let response = await fetch(route, {
  method: "POST",
  headers: {
    Authorization: token,
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(payload),
});

let responseJson = await response.json();

Backend API system has been developed using .net core. Base64 string returned by expo's imagepicker is quiet long and when it is sent across using fetch call, it doesn't received on backend side. All my other calls to backend side from client works properly except this one and only difference here is I'm sending large base64 string in payload.

I'm not able to figure out why call is failing and whether I need to do any special settings on fetch call i.e. client side/API side i.e. backend side in order to send n receive base64 string value?

What could be reason/error for not able to send across the base64 string from React Native to .net core API?

Answer 1

Using axios instead of fetch helped me to solve my problem. Setting maxBodyLength in header to bigger int value helped. Following is code snippet :

const route =
    <*your-api-url*>;
  const payload = {
    caption: "This is image",
    imageBase: <*base64String here*>,
  };
  const resp = await axios.post(route, payload, {
    **maxBodyLength: 20000000**,
  });