what's the difference between Blob and Blobbuilder or Blobbuilder's issue on android native browser

Question

The question is not duplicate from What's the difference between BlobBuilder and the new Blob constructor?

I'm doing web app. To upload image I use Blob, just in case BlobBuilder too. Blob works well, but Blob doesn't work on android native browser, android native browser uses BlobBuilder. I expected, Blob and BlobBuilder returns the same blob, but they didn't. Here is my code:

base64toBlob: function(b64Data, contentType, sliceSize) {
  var BlobBuilder, blob, byteArray, byteCharacters, byteNumbers, charCodeFromCharacter, err, posIndex;

  if (contentType == null) {
    contentType = '';
  }
  if (sliceSize == null) {
    sliceSize = 1024;
  }
  posIndex = b64Data.indexOf('base64,');
  if (posIndex !== -1) {
    b64Data = b64Data.substring(posIndex + 7);
  }
  charCodeFromCharacter = function(c) {
    return c.charCodeAt(0);
  };
  byteCharacters = atob(b64Data.replace(/\s/g, ''));
  byteNumbers = Array.prototype.map.call(byteCharacters, charCodeFromCharacter);
  byteArray = new Uint8Array(byteNumbers);
  try {
    blob = new Blob([byteArray.buffer], {
      type: contentType
    });
    return blob;
  } catch (_error) {
    err = _error;
    BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(byteArray.buffer);
    return blob.getBlob(contentType);
  }
}

I did logs when I send request

blobImg = base64toBlob(base64Data, imageType);
alert(JSON.stringify(blobImg));
// alert shows {"type": "image/jpeg", "size": 10251 } when blob worked
// alert shows {"type": "image/jpeg", "size": 27822 } when blobbuilder worked
ajaxRequest.send(blobImg);

I tried to upload at the same image on all browsers. On Chrome and other browsers I get from log {"type": "image/jpeg", "size": 10251 } and request send successfully, but on android native browser i get {"type": "image/jpeg", "size": 27822 } and request failed with status code 0. On android browser works catch part (I guess, it means Android native browser does not support Blob) I tested in android 4.1.2. I found nothing from google about the issue. I will glad If somebody help me!

Answer 1

Note the difference between what you pass in:

try {
    blob = new Blob([byteArray.buffer], { // use of .buffer
      type: contentType
    });
    return blob;
} catch (_error) {
    err = _error;
    BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(byteArray); // just uses the raw array
    return blob.getBlob(contentType);
}

From the MDN documentation for BlobBuilder.append:

Appends the contents of the specified JavaScript object to the Blob being built. If the value you specify isn't a Blob, ArrayBuffer, or String, the value is coerced to a string before being appended to the blob.

byteArray is not of type ArrayBuffer, so it's probably being coerced to a string. You can confirm this yourself by converting it to a string and checking its length. To fix it, just use byteArray.buffer in your catch block.

Interestingly enough, the Blob constructor appears to accept an ArrayBufferView directly, which your Uint8Array qualifies as. This may mean you don't actually need the .buffer in that case, though I'm not familiar enough with the API to say with any confidence.