How to upload file to server using react-native

Solution 1:

There is file uploading built into React Native.

Example from React Native code:

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!');

var xhr = new XMLHttpRequest();
xhr.open('POST', serverURL);
xhr.send(body);

Solution 2:

My solution is using fetch API and FormData.

Tested on Android.

const file = {
  uri,             // e.g. 'file:///path/to/file/image123.jpg'
  name,            // e.g. 'image123.jpg',
  type             // e.g. 'image/jpg'
}

const body = new FormData()
body.append('file', file)

fetch(url, {
  method: 'POST',
  body
})

Solution 3:

I wrote something like that. Check out https://github.com/kamilkp/react-native-file-transfer

Solution 4:

I have been struggling to upload images recently on react-native. I didn't seem to get the images uploaded. This is actually because i was using the react-native-debugger and network inspect on while sending the requests. Immediately i switch off network inspect, the request were successful and the files uploaded.

I am using the example from this answer above it works for me.

This article on github about the limitations of network inspect feature may clear things for you.