Search code examples
iosreactjsreact-nativeform-datareact-native-ios

React-Native FormData File Requests being sent to the server as [object Object]


I am currently using React Native 0.48 and react-native-image-crop-picker 0.16.

I'm attempting to take a file uri, and send it to a server using FormData and Fetch.

Here is a code snippet of what I am doing:

var image = await ImagePicker.openPicker({
  width: 500,
  height: 500,
  cropping: true,
  includeBase64: true,
});

var media = {
  uri: image.path,
  type: 'image/jpeg',
  name: 'file.jpg',
};

var formData = new FormData();
formData.append("file", media);

fetch("https://requestb.in/1e6lgdo1", {
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formData
}).then(function(r){
  console.log("Success", r);
}).catch(function(e){
  console.log("Error", e);
}).done();

Unfortunately when the request gets sent to the server instead of sending the file contents in the "file" form data field, it's just sending "[Object object]".

Depending on where you send the request to, that either results in the file contents becoming "[object Object]" or the request erring out.

I am unable to determine if this is a problem with my own code, or with react native itself. Any assistance would be greatly appreciated.

Update

I am using https://github.com/jpillora/uploader for my test server. (Note: Go doesn't ever use the notation [object Object] when stringifying an object, so I do not believe the problem lies with the server. In addition I saw this when uploading a file to S3 as well.)

An example of a request that ends up getting sent out is:

------WebKitFormBoundaryzt2jTR8Oh7dXB56z
Content-Disposition: form-data; name="file"

[object Object]
------WebKitFormBoundaryzt2jTR8Oh7dXB56z--

Solution

  • This problem had to do with another package React-Native Debugger hijacking fetch requests in order to allow for inspection in the debugger.

    Complete information on the workaround can be found here: https://github.com/jhen0409/react-native-debugger/issues/101

    I was able to successfully bypass it however by going back to the Google Chrome debugger.