React Native XHR multipart/form-data send data as [object Object]

Question

I'm trying to send a multipart/form-data from React Native (Running on Simulator) to backend server using XHR with the following code

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://....url....');
let formdata = new FormData();
formdata.append('title','This is awesome');
xhr.send(formdata);

However in console log the Request Payload are shown as [object Object]

So I decided to take the same code and put it in an HTML file and run from Chrome browser and Request Payload from console log is showing as below which I was expecting it from React Native

------WebKitFormBoundaryGXwudBdBkJzBnPug
Content-Disposition: form-data; name="title"

This is awesome
------WebKitFormBoundaryGXwudBdBkJzBnPug--

Answer 1

I had the same issue and after a day of research I found that we have to apply a polyfill, because React Native environment differs from what you can find in browser or Node.js.

Put this line in your main index file, and you should be good:

global.FormData = global.originalFormData ? global.originalFormData : global.FormData;

for TypeScript define global first:

declare const global: any;

Answer 2

To be complete: https://github.com/jhen0409/react-native-debugger/issues/38 and https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md should solve your problem

In short: global.FormData = global.originalFormData