title: How to send a file from the browser to a remote IPFS gateway
body: <p>I have an input field that's calling a _getFile function</p>
  
  <pre><code>&lt;input type="file" class="file" on-change="_getFile"/&gt;
  </code></pre>
  
  <p>the get file </p>
  
  <pre><code>_getFile(event) {
    this.loading = true;
    const file = event.target.files[0];
    let reader = new window.FileReader()
    reader.onloadend = () =&gt; this._saveToIpfs(reader)
    reader.readAsArrayBuffer(file)
   }
  }
  </code></pre>
  
  <p>once we have an array buffer we then call...</p>
  
  <pre><code>_saveToIpfs(data){
  
  }
  </code></pre>
  
  <p>It is this that I need help with, I want to send the selected file to '<a href="https://ipfs.infura.io:5001/api/v0/add" rel="noreferrer">https://ipfs.infura.io:5001/api/v0/add</a>' or '<a href="https://ipfs.io/api/v0/add" rel="noreferrer">https://ipfs.io/api/v0/add</a> ' how to do? is it an xhr post? I expect to get an IPFS hash back</p>
  
  <p>The below simple form seems to upload the file and then get disconnected with the error ERR_CONTENT_LENGTH_MISMATCH</p>
  
  <pre><code>&lt;form action="https://ipfs.io/api/v0/add/" method="post" enctype="multipart/form-data"&gt;
      Select image to upload:
      &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;
      &lt;input type="submit" value="Upload Image" name="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I aso tried a classic XHR</p>
  
  <pre><code>_getFile(event) {
  const file = event.target.files[0];
  var data = new FormData();
  data.append('path', event.target.files[0]);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
      if(request.readyState == 4){
          console.log(request.response)
      }
  };
  request.open('POST', 'https://ipfs.io/api/v0/add');
  request.send(data);
  }
  </code></pre>
  
  <p>with again ERR_CONTENT_LENGTH_MISMATCH</p>