react-native android getting Blob JSON instead of image file in S3 pre-signed URL

Question

I'm trying to upload an image from android using react-native-image-picker and pre-signed URL but instead getting an image with no content and if I change the image file extension to JSON, I get the blob content in JSON format as shown below

{"_data":{"lastModified":0,"name":"rn_image_picker_lib_temp_e47f0064-c49c-439e-95e2-30ed167d1444.jpg","size":2447490,"offset":0,"type":"image/jpeg","blobId":"8d905790-3113-4cb7-b9ab-b5415e5e6b50","__collector":{}}}

Below is the code snippet for the Axios request and the component

// HTTP Requests

export const save = async (uri, data, type) => 
    await axios.put(uri, data, {headers: {'Content-Type': type,  Accept: "application/json"}}) 
        .then(response => {
            return response.data;
        }, error => {
            return error.response.data;
        });

export const getImageURI = async id =>
    await axios.post(URL + id) 
        .then(response => {
            return response.data;
        }, error => {
            return error.response.data;
        });

import React from 'react';
import { TouchableOpacity } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import { getImageURI, save } from '../Services';

const UploadImage = (props) => {
  const uploadImageOnS3 = async (file) => {
    const res = await fetch(file.uri);
    const blob = await res.blob();
    let signedUriResp = await getImageURI("someId");
    await save(signedUriResp.url, blob, file.type);
  }

  return (
     <TouchableOpacity  onPress={() =>  
          launchImageLibrary({mediaType: 'photo', includeBase64: true}, 
              (response) => uploadImageOnS3(response))} 
     />
  );
}
export default UploadImage;

Versions:

"react-native-image-picker": "3.2.1",
"react-native": "0.63.4",
"react": "16.13.1",
"axios": "^0.21.1",

I've given permission for Camera and Storage to the application in android. Not sure why the blob is not uploaded correctly as an image to S3. Did anyone come across a similar issue? Please let me know if there is any I missed anything.

Answer 1

Changing axios to fetch in the save image call solved the issue. Here is the snippet of the above method

export const save = async (data, uri, type) =>
  await fetch(uri, {
    method: 'PUT',
    headers: {
      Accept: 'application/json',
      'Content-Type': type
    },
    body: data
  });