title: Uploading a binary file using fetch
body: <p>I'm trying to upload a file to Zendesk, here is the API:</p>
  
  <pre><code>curl "https://{subdomain}.zendesk.com/api/v2/uploads.json? 
  filename=myfile.dat&amp;token={optional_token}" \
  -v -u {email_address}:{password} \
  -H "Content-Type: application/binary" \
  --data-binary @file.dat -X POST
  </code></pre>
  
  <p>This is how my code looks like while file is a <code>File object</code> I'm getting from a dropzone:</p>
  
  <pre><code>const formData = new FormData();
  formData.append("file", file);
  
  fetch(
    "https://{my-domain}.zendesk.com/api/v2/uploads.json?filename=" + file.name,
    {
      method: "POST",
      body: formData
    }
  )
  </code></pre>
  
  <p>The problem is that the final file is corrupted because of <code>WebKitFormBoundary</code> header and footer.</p>
  
  <p>This is what I tried:</p>
  
  <ol>
  <li><p>Setting <code>"Content-Type: application/binary"</code> header as this is what the API expect.</p></li>
  <li><p>Passing the file to the fetch <code>body</code> without <code>FormData</code> (as-is).</p></li>
  <li><p>Using <code>FileReader.readAsBinaryString</code> before passing it to the body.</p></li>
  </ol>
  
  <p>None of my attempts worked - the server returned error, the only way I was able to create a file is with the <code>FormData</code> and without any <code>Content-Type</code> header but I didn't find a way to get rid of the <code>WebKitFormBoundary</code> header and footer.</p>
  
  <p>For example:</p>
  
  <pre><code>------WebKitFormBoundaryragq26qGRKa2B9Qg
  Content-Disposition: form-data; name="file"; filename="README.md"
  Content-Type: text/markdown
  
  
  ------WebKitFormBoundaryragq26qGRKa2B9Qg--
  </code></pre>