Appending Blob data

Deni Spasovski picture Deni Spasovski · Apr 12, 2013 · Viewed 19.7k times · Source

Is there a function for appending blob data in JavaScript I currently use the following approach:

var bb = new Blob(["Hello world, 2"], { type: "text/plain" });
bb = new Blob([bb, ",another data"], { type: "text/plain" });

And BlobBuilder function is not available in Chrome.

Answer

nkron picture nkron · Jul 22, 2014

Blobs are "immutable" so you can't change one after making it. Constructing a new Blob that appends the data to an existing blob (as you wrote in your initial question) is a good solution.

If you don't need to use the Blob each time you append a part, you can just track an array of parts. Then you can continually append to the array and then construct the Blob at the end when you need it.

var MyBlobBuilder = function() {
  this.parts = [];
}

MyBlobBuilder.prototype.append = function(part) {
  this.parts.push(part);
  this.blob = undefined; // Invalidate the blob
};

MyBlobBuilder.prototype.getBlob = function() {
  if (!this.blob) {
    this.blob = new Blob(this.parts, { type: "text/plain" });
  }
  return this.blob;
};

var myBlobBuilder = new MyBlobBuilder();

myBlobBuilder.append("Hello world, 2");

// Other stuff ... 

myBlobBuilder.append(",another data");
var bb = myBlobBuilder.getBlob();