score:0

Fetch image as BLOB

 const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", "FILE_URI_HERE", true);
    xhr.send(null);
  });

score:0

The transformRequest method used here of solving this issue is not working on me so I did a workaround of using JSON.stringify.

const formData = new FormData()
...

MyApiInstance.post('endpoint', JSON.stringify(formData)).then(() ...

hope this help someone.

score:1

there is no no need to set the content-type header in your request. It automatically identify your request contains the buffer data. so you just pass the request without setting multipart content-type header.

I'm also confused with this same issue. my MacBook is sending the request without any issue by using postman, and my android device is having issues sending the multipart request.

Solution

Poor network connection is the major issue in this part. So just change your mobile network to any other network, which has the better internet connectivity. and check again. surely it solved your issue

Native javascript query for sending the multipart data - axios is also using this same native library

 var data = new FormData();
    data.append("file", {
                          name: 'image.png',
                          type: 'image/png,
                          uri: 'file:///file-cache-url'
                        }, "image.png");
     
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    
    xhr.addEventListener("readystatechange", function() {
      if(this.readyState === 4) {
        console.log(this.responseText);
      }
    });

xhr.open("POST", "http://127.0.0.1:3000/data/upload");

xhr.send(data);

score:3

Axios' FormData is broken since v0.25 for react-native. They tried to optimize the FormData detection util for no real reason. Unfortunately, the proper detection fails for non browser environments.

You can find a workaround here for now: https://github.com/axios/axios/issues/4406#issuecomment-1048693170

TL;DR

const formData = new FormData();
...
const response = await axios.post('/URL', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  transformRequest: (data, headers) => {
    return formData; // this is doing the trick
  },
});

Just pass a transformRequest and return your formData and everything will "work" magically again. This is a workaround though (I've spent 5 hours on this issue) and should hopefully be fixed in an upcoming version.


Related Query

More Query from same tag