How to replace the deprecated BlobBuilder with the new Blob constructor?

Question

Since Blobbuilder is deprecated and I have recently decided to use a new facial recognition API I am having a hard time switching over to just "blob".

function dataURItoBlob(dataURI, callback) {
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs

        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        } else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to an ArrayBuffer
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        // write the ArrayBuffer to a blob, and you're done
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
}

I tried switching it over to just:

        // write the ArrayBuffer to a blob, and you're done
        var Blob = window.URL || window.webkitURL;
        var bb = new Blob();

        /*var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = window.URL.createObjectURL(blob);
        document.body.appendChild(link);*/

        /*var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);*/
        return bb.getBlob(mimeString);
}

But i keep getting Uncaught TypeError: Object #<URL> has no method 'getBlob' in the console. Not sure what I am missing. If i try to use bb.append(ab); I get Uncaught TypeError: Object #<Blob> has no method 'append' in the console.

Rob W · Accepted Answer · 2013-02-22T22:27:03.640

17

Switching from BlobBuilder to Blob is quite straightforward. Try the following backwards-compatible code (the stuff in the catch block is your original code):

...
    try {
        return new Blob([ab], {type: mimeString});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
    }
}

edited Feb 22 '13 at 22:27

answered Feb 22 '13 at 18:41

Rob W

341,306
83
791
678

In the update of my post, I tried your code and received 'Uncaught TypeError: undefined is not a function' – shayward Feb 22 '13 at 19:14
@shayward Use the code in my answer without any modifications: Take your original function, and replace the last lines (`var BlobBuilder ...... }`) with my code. – Rob W Feb 22 '13 at 21:11
Thanks works, just an error after type: mimeString. Missing closing bracket. But for the future will this be removed as well? – shayward Feb 22 '13 at 22:26
2

@shayward The `Blob` constructor is defined in the [latest version of the specification](http://www.w3.org/TR/FileAPI/#dfn-Blob). So, unless the spec changes again, you'll be safe. For compatibility, see http://caniuse.com/blobbuilder. – Rob W Feb 22 '13 at 22:32

casey · Answer 2 · 2013-05-14T15:11:43.550

Blob = (function() {
  var nativeBlob = Blob;

  // Add unprefixed slice() method.
  if (Blob.prototype.webkitSlice) {
    Blob.prototype.slice = Blob.prototype.webkitSlice;  
  }
  else if (Blob.prototype.mozSlice) {
    Blob.prototype.slice = Blob.prototype.mozSlice;  
  }

  // Temporarily replace Blob() constructor with one that checks support.
  return function(parts, properties) {
    try {
      // Restore native Blob() constructor, so this check is only evaluated once.
      Blob = nativeBlob;
      return new Blob(parts || [], properties || {});
    }
    catch (e) {
      // If construction fails provide one that uses BlobBuilder.
      Blob = function (parts, properties) {
        var bb = new (WebKitBlobBuilder || MozBlobBuilder), i;
        for (i in parts) {
          bb.append(parts[i]);
        }
        return bb.getBlob(properties && properties.type ? properties.type : undefined);
      };
    }        
  };
}());

Include this before you are going to use Blobs and you'll be able to use Blob constructors in browsers that only support the deprecated BlobBuilder.

It might be helpful to put a few more comments in this to make it clear what each part is doing. — Thomas, May 14 '13 at 14:26
Yea, that will make it more helpful to others in the future. — Thomas, May 14 '13 at 15:16
Yup, it doesn't work on webOS either - can't find WebKitBlobBuilder nor the other var... — Daniele Muscetta, Mar 13 '23 at 08:41

How to replace the deprecated BlobBuilder with the new Blob constructor?

2 Answers2

Linked