react-native FormData upload does not send the right data - react-native

Question

I've been looking through all the questions I could find but it looks like nobody had my problem.
I'm running react-native 39 and I want to upload an image. It looks like that it is possible to upload it using FormData.
/**
* Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
* with mixed data (string, native files) to be submitted via XMLHttpRequest.
*
* Example:
*
* var photo = {
* uri: uriFromCameraRoll,
* type: 'image/jpeg',
* name: 'photo.jpg',
* };
*
* var body = new FormData();
* body.append('authToken', 'secret');
* body.append('photo', photo);
* body.append('title', 'A beautiful photo!');
*
* xhr.open('POST', serverURL);
* xhr.send(body);
*/
Using the method I just get [object Object] in the body of the request.
Using fetch instead of xhr I get some data but now that I would expect, there's no image that I can get from the server

Answer 1

The problem is that the Form has no idea about what the information stored in the object that you are trying to encode means, so it will not fetch the picture data from the device, and instead, just figure out the 'proper' representation that the photo object might have, and that is usually a string. In this case [object Object]. Of course, that won't be accepted by your server. In fact this happens to all non-primitive types of JavaScript. You should use JSON.stringify(photo) to convert it to a JSON string first.
Instead, what you can try is to retrieve the image data from the camera roll in a format that FormData can understand, for instance, a string that encodes your image in base64. This is not a functionality that comes with React Native, but a quick search retrieved some promising packages. Maybe have a look at:
react-native-image-to-base64
react-native-upload-from-camera-roll
this post
JS.coach
react-native-fs
Then, once you have your image in base64 format, you can do the following:
var photo = {
data: myBase64Data,
type: 'image/jpeg',
name: 'photo.jpg',
};
var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', JSON.stringify(photo));
body.append('title', 'A beautiful photo!');
xhr.open('POST', serverURL);
xhr.send(body);
Hope that helps.

Answer 2

If you guys are still looking for the answer why you cannot see that in Network tabs in React Native, here is an answer.
This is because you use a snippet to make this Networking tab working in debuggers.
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Add also the line below, and it will enable FormData normal behavior.
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
You should end up with following:
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData;
It worked for me.