JavaScript Blob : Object

constructor

Blobs are immutable objects that represent raw data. File is a derivation of Blob that represents data from the file system. Use FileReader to read data from a Blob or File. Blobs allow you to construct file like objects on the client that you can pass to apis that expect urls instead of requiring the server provides the file. For example, you can construct a blob containing the data for an image, use URL.createObjectURL() to generate a url, and pass that url to HTMLImageElement.src to display the image you created without talking to a server.

Spec

Constructors

new Blob() : Blob

Creates a new Blob with size set to 0.

Example:

var blob = new Blob();

console.log(blob.size);
console.log(blob.type);

Run

Results:

new Blob(blobParts : Array, [blobPropertyBag : Object]) : Blob

blobPropertyBag : {

type	String	A valid mime type such as `'text/plain'`
endings	String	Must be either `'transparent'` or `'native'`

}

Creates a new Blob. The elements of blobParts must be of the types ArrayBuffer, ArrayBufferView, Blob, or String. If ending is set to 'native', the line endings in the blob will be converted to the system line endings, such as '\r\n' for Windows or '\n' for Mac.

Example:

var blob = new Blob(['foo', 'bar']);

console.log('size=' + blob.size);
console.log('type=' + blob.type);

var testEndings = function(string, endings) {
  var blob = new Blob([string], { type: 'plain/text',
                                  endings: endings });
  var reader = new FileReader();
  reader.onload = function(event){
    console.log(endings + ' of ' + JSON.stringify(string) + 
                ' => ' + JSON.stringify(reader.result));
  };
  reader.readAsText(blob);
};

testEndings('foo\nbar',   'native');
testEndings('foo\r\nbar', 'native');
testEndings('foo\nbar',   'transparent');
testEndings('foo\r\nbar', 'transparent');

Run

Results:

Instance Properties

size : Number readonly

The size of the blob in bytes.

Example:

var blob = new Blob(['foo', 'bar'], { type: 'plain/text',
                                      endings: 'native' });

console.log(blob.size);

Run

Results:

Spec

type : String readonly

The type of the blob.

Example:

var blob = new Blob(['foo', 'bar'], { type: 'plain/text',
                                      endings: 'native' });

console.log(blob.type);

Run

Results:

Spec

Instance Methods

arrayBuffer() : Promise<ArrayBuffer>

Asynchronously returns an ArrayBuffer for the data in this. See also FileReader.readAsArrayBuffer().

Example:

const blob = new Blob(['foo']);
const arrayBuffer = await blob.arrayBuffer();
console.log(arrayBuffer.byteLength);

const chars = new Uint8Array(arrayBuffer);
console.log(chars);

// The bytes of the ArrayBuffer match the char codes of the string
console.log([...'foo'].map(c => c.charCodeAt(0)));

Run

Results:

Spec

slice([start = 0 : Number, [end : Number, [contentType = '' : String]]]) : Blob

Returns a new blob that contains the bytes start to end - 1 from this. If start or end is negative, the value is added to this.size before performing the slice. If end is not specified, this.size is used. The returned blob's type will be contentType if specified, otherwise it will be ''.

Example:

var blob = new Blob(['foo', 'bar'], { type: 'plain/text',
                                      endings: 'native' });
console.log('blob size:', blob.size);
console.log('blob type:', blob.type);

var copy = blob.slice()
console.log('copy size:', copy.size);
console.log('copy type:', copy.type);

var slice = blob.slice(1, 4, 'foo-type')
console.log('slice size:', slice.size);
console.log('slice type:', slice.type);

Run

Results:

Spec

stream() : ReadableStream

Returns a stream of the data in this. The values of the stream will be Uint8Arrays.

Example:

const blob = new Blob(['foo']);
const stream = blob.stream();
const reader = stream.getReader();

let result;
while (!(result = await reader.read()).done) {
  console.log(result.value);
}

Run

Results:

Spec

text() : Promise<String>

Asynchronously returns a String for the data in this. See also FileReader.readAsText().

Example:

const blob = new Blob(['foo']);
console.log(await blob.text());

Run

Results:

Spec

home license contribute feedback