title: Using Fetch instead of XMLHttpRequest in React Native
body: <p>I was trying to upload images to S3 from my react native app by following and adapting this guide by heroku: <a href="https://devcenter.heroku.com/articles/s3-upload-node" rel="nofollow">https://devcenter.heroku.com/articles/s3-upload-node</a></p>
  
  <p>Essentially I am using the aws-sdk on my express.js backend to generate pre-signed request for uploading images to S3 from react native.</p>
  
  <p>Everything works well, so then I tried to convert the XMLHttpRequests into fetch requests, which seem to be favoured by react native. After the conversion, the files are still being uploaded to S3, but when I click on the image links, then the images wouldn't not show properly, instead an empty square is shown: </p>
  
  <p><a href="http://i.stack.imgur.com/4IZ2p.png" rel="nofollow">Empty square shown instead of image</a></p>
  
  <p>More specifically it seems to be this piece of code conversion that causes it to happen:</p>
  
  <p>From:</p>
  
  <pre><code>_uploadFile(file, signedRequest, url){
    const xhr = new XMLHttpRequest();
    xhr.open('PUT', signedRequest);
    xhr.onreadystatechange = () =&gt; {
      if(xhr.readyState === 4){
        if(xhr.status === 200){
          console.log("UPLOAD DONE");
        } else {
          alert('ERROR UPLOADING');
        }
      }
    };
    xhr.send(file);
  }
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>_uploadFile(file, signedRequest, url) {
    let option = {
      method: "PUT",
      headers: {
        "Content-Type": "image/jpeg",
      },
      body: JSON.stringify(file)
    }
  
    fetch(signedRequest, option)
      .then(res =&gt; console.log("UPLOAD DONE"))
      .catch(err =&gt; console.log("ERROR UPLOADING: ", err))
  }
  </code></pre>
  
  <p>The file object being uploaded:</p>
  
  <pre><code>  {
      name: "profileImage",
      type: "image/jpeg",
      uri: 'data:image/jpeg;base64,' + response.data, //just a base64 image string
      isStatic: true
    }
  </code></pre>
  
  <p>Could anyone shed some light on why this could be happening, or have had similar experiences? Many thanks!</p>