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.
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--
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.