title: Network request failed on react native upload image
body: <p>I am trying to capture, and upload an image to a server from react native, however I get the following error when I make the http request:</p>
  <p><strong>[TypeError: Network request failed]</strong></p>
  <p>Here is my code, I have followed this tutorial:</p>
  <p><a href="https://heartbeat.fritz.ai/how-to-upload-images-in-a-react-native-app-4cca03ded855" rel="noreferrer">https://heartbeat.fritz.ai/how-to-upload-images-in-a-react-native-app-4cca03ded855</a></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import {View, Image, Button} from 'react-native';
  import ImagePicker from 'react-native-image-picker';
  
  export default class App extends React.Component {
    state = {
      photo: null,
    };
  
    createFormData = (photo) =&gt; {
      const data = new FormData();
  
      data.append('photo', {
        name: photo.fileName,
        type: photo.type,
        uri:
          Platform.OS === 'android'
            ? photo.uri
            : photo.uri.replace('file://', ''),
      });
  
      data.append('id', 1);
      return data;
    };
  
    handleChoosePhoto = () =&gt; {
      const options = {
        noData: true,
      };
      ImagePicker.launchImageLibrary(options, (response) =&gt; {
        if (response.uri) {
          this.setState({photo: response});
        }
      });
    };
  
    handleUploadPhoto = () =&gt; {
      fetch('http://192.168.1.104:3000/', {
        method: 'POST',
        body: this.createFormData(this.state.photo),
      })
        .then((response) =&gt; response.text())
        .then((response) =&gt; {
          console.log('upload success', response);
        })
        .catch((error) =&gt; {
          console.log('upload error', error);
        });
    };
  
    render() {
      const {photo} = this.state;
      return (
        &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}&gt;
          {photo &amp;&amp; (
            &lt;React.Fragment&gt;
              &lt;Image
                source={{uri: photo.uri}}
                style={{width: 300, height: 300}}
              /&gt;
              &lt;Button title=&quot;Upload&quot; onPress={this.handleUploadPhoto} /&gt;
            &lt;/React.Fragment&gt;
          )}
          &lt;Button title=&quot;Choose Photo&quot; onPress={this.handleChoosePhoto} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  </code></pre>
  <p>I've tried:</p>
  <ul>
  <li>Add &quot;Content: multipart/form-data&quot; to http request headers</li>
  <li>Add Accept: Accept: application/json&quot; to http request headers</li>
  </ul>
  <p>I have noticed that the request fails, only when I add the photo object to the &quot;FormData&quot;, that is, the http request runs correctly when I remove the following code:</p>
  <pre class="lang-js prettyprint-override"><code>data.append('photo', {
        name: photo.fileName,
        type: photo.type,
        uri:
          Platform.OS === 'android'
            ? photo.uri
            : photo.uri.replace('file://', ''),
      });
  </code></pre>
  <h3>Edit 02-07-2020</h3>
  <p>I finally found the solution here:</p>
  <p><a href="https://github.com/facebook/react-native/issues/28551#issuecomment-610652110" rel="noreferrer">https://github.com/facebook/react-native/issues/28551#issuecomment-610652110</a></p>