title: blob in multipart/form-data sending as [object Blob] with XMLHttpRequest
body: <p>I have a binary file I want to send in a multipart/form-data POST request. I want to include the binary in my javascript so I found a javascript function to convert a base64 string to a blob, it is below.</p>
  
  <pre><code>var b64data = 'blablabla';
  const b64toBlob = (b64Data, contentType='', sliceSize=512) =&gt; {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];
  
    for (let offset = 0; offset &lt; byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
  
      const byteNumbers = new Array(slice.length);
      for (let i = 0; i &lt; slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
  
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
  
    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }
  const contentType = 'application/x-gzip';
  const payload = b64toBlob(b64data, contentType);
  </code></pre>
  
  <p>I then use that blob as part of a multipart/form-data send with XMLHttpRequest. The relevant code is:</p>
  
  <pre><code>function fileUpload(url, fileData, fileName, nameVar, ctype) {
      var fileSize = fileData.length,
          boundary = "ABCDEFGHIFD",
          xhr = new XMLHttpRequest();
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
  
      var body = "--" + boundary + "\r\n";
      body += 'Content-Disposition: form-data; name="' + nameVar +'"; filename="' + fileName + '"\r\n';
      body += "Content-Type: " + ctype + "\r\n\r\n";
      //body += fileData;
      end = "\r\n--" + boundary + "--";
  
      //var body = fileData;
      xhr.send(body + fileData + end);
      return true;
  }
  </code></pre>
  
  <p>When I feed payload into the function like <code>fileUpload(url,payload,fileName,nameVar,ctype);</code>, the part that should be binary data just transfers as <code>[object Blob]</code>. If I take out the body and only send the fileData,</p>
  
  <pre><code>var body = fileData;
  xhr.send(body);
  </code></pre>
  
  <p>It transfers the binary data in the packet. </p>
  
  <p>Why is the first function not sending the binary through?</p>