Blob object

The Blob object represents a byte sequence similar to a file and provides methods and properties to create or manipulate ranges of binary data. A blob can be created either using the constructor as shown here, or as a return value of the slice method.

Syntax


//  Use the blob constructor to create a new blob object
//  that represents an image. 
var blobObject = new Blob([new Uint8Array(array)], { type: 'image/png' }); 

Members

The Blob object has these types of members:

Methods

The Blob object has these methods.

MethodDescription
msClose

Closes the Blob object by releasing the stream held by the Blob and the associated file or memory resource.

msDetachStream

Detaches the IInputStream object from the Blob in order to use the backing IInputStream object in other WinRT APIs.

slice

Returns a new Blob object with bytes ranging from its optional start parameter up to but not including its optional end parameter.

 

Properties

The Blob object has these properties.

PropertyDescription

size

The size of the Blob object in bytes.

type

Returns the content type of the object.

 

Remarks

The Blob object represents immutable raw data. It provides a method to slice data objects between ranges of bytes into further chunks of raw data. It also provides an attribute representing the size of the chunk of data. The File object inherits from the blob object.


var file = document.getElementById('fileInput').files[0]; // Get the user selected file from the <input type="file" id="fileInput" /> element.
var firstHalf = file.slice(0, Math.round(file.size/2)); // Get a blob that contains the first half of the file.

Blob objects can be read asynchronously only on the main thread via FileReader objects or through the URL.createObjectURL method for access to data through Image or video tags.

Metadata access via attributes such as size and type return synchronously. This trade-off is based on the assumption that metadata access doesn't significantly block or disrupt the browser's main thread, while reading blob data does.

With respect to Windows Store apps using JavaScript, the Blob (binary large object) is a Document Object Model (DOM) type that acts as a wrapper for sized, random-access binary data that you are using for a JavaScript application. This lets you provide access for multimedia files, such as those that use image, video, or audio formats, from your application. You use the readAsBlob method on the msStreamReader object to convert a stream of unsized, sequential binary data (represented by an msStream object) into a Blob object.

The Blob object also allows interoperation with a C++ IRandomAccessStream object through the msRandomAccessStream property. This lets you save the data from a Blob to a file in the file system or to an IndexedDB.

A Blob is consumed or created in the following areas:

  • XmlHttpRequest (XHR)
  • Canvas
  • IndexedDB
  • PostMessage

The blob object has a slice method that you use to access a range of bytes within the blob object. The slice becomes a separate blob object.

You create the Uniform Resource Identifier (URI) for the blob object using the window.URL.createObjectURL method. To revoke the URI, you use the window.URL.revokeObjectURL method.

Examples

Because the File object inherits from the Blob object, the following code sample is based on the File object.


<!DOCTYPE html>
<html>

<head>
  <title>Reading a Binary Large Object (blob)</title>
  <script type="text/javascript">
  
    // ---------------------------------------------------------------------------------------------------------

    var globals = 
        {
          selectedFile: null,
          fileSize: 0 
        };

    // ---------------------------------------------------------------------------------------------------------

    window.addEventListener('load', init, false);

    // ---------------------------------------------------------------------------------------------------------

    function fileApiSupportCheck() {
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // All the File APIs are supported.
      }
      else {
        document.getElementById('alert').innerHTML = '<h2>FILE APIs NOT FULLY SUPPORTED - UPDATE YOUR BROWSER</h2>';
      }
    }

    // ---------------------------------------------------------------------------------------------------------
    
    function init() {
      fileApiSupportCheck();
      document.getElementById('fileInput').addEventListener('change', fileInputHandler, false);
      document.getElementById('byteRangeButton').addEventListener('click', byteRangeButtonHandler, false);
    }

    // ---------------------------------------------------------------------------------------------------------
    
    function fileInputHandler(evt) {
      var f = evt.target.files[0]; // The solo file selected by the user.

      if (!f.size) {
        document.getElementById('alert').innerHTML = 'Please select a file (that contains some content).';
        return;
      }

      globals.selectedFile = f;
      globals.fileSize = f.size;

      document.getElementById('byteCount').innerHTML = '<li><strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ') = <strong>' + f.size + ' bytes</strong></li>';
      document.getElementById('hidder').style.visibility = "visible"; // We've selected a valid file and can now safely show the byte range input markup.
    }

    // ---------------------------------------------------------------------------------------------------------

    function byteRangeButtonHandler() {
      var start = Number(document.getElementById('byteStart').value);
      var end = Number(document.getElementById('byteEnd').value);

      if (start < 0 || start >= globals.fileSize) {
        start = 0;      
        document.getElementById('alert').innerHTML = 'Bad starting byte value, using ' + start + ' instead.';
      }

      if (end <= start || end > globals.fileSize) {
        end = globals.fileSize;
        document.getElementById('alert').innerHTML = 'Bad ending byte value, using ' + end + ' instead.';
      }

      readBlob(start, end);
    }

    // ---------------------------------------------------------------------------------------------------------

    function readBlob(startByte, endByte) {
      var file = globals.selectedFile;
      var blob = file.slice(startByte, endByte); // Grab a blob of file data starting from startByte up to but not including endByte.

      var reader = new FileReader();
      reader.onloadend = onloadendHandler;
      reader.onerror = errorHandler;
      reader.readAsText(blob); // Read the file asynchronously and use callbacks to handle necessary actions.
    }

    // ---------------------------------------------------------------------------------------------------------
    
    function onloadendHandler(evt) {
      if (evt.target.readyState == FileReader.DONE) {
        document.getElementById('fileOutputHeader').textContent = "File bytes in text format:";
        document.getElementById('byteRangeFileContent').textContent = evt.target.result;
      }
    }

    // ---------------------------------------------------------------------------------------------------------
    
    function errorHandler(evt) {
      if (evt.target.error.name == "NotReadableError") {
        document.getElementById('alert').innerHTML = 'The file could not be read.';
      }
      else {
        document.getElementById('alert').innerHTML = 'File error.';
      }      
    }
  </script>
</head>

<body>
  <h1>Reading a Binary Large Object (blob)</h1>
  <p>Displays file data between a starting byte value and ending byte value.</p>
  <h3>Select a file:</h3>
  <p><input type="file" id="fileInput" /></p>
  <div id="hidder" style="visibility: hidden;">
    <ul id="byteCount"></ul>  
    <h3>Enter byte range:</h3>
    <p><input type="number" id="byteStart" /> Start byte (counting from the 0<sup>th</sup> byte).</p>
    <p><input type="number" id="byteEnd" /> End byte (counting from the 0<sup>th</sup> byte).</p>
    <p><button id="byteRangeButton">Show File Content for Byte Range</button></p>
    <h3 id="fileOutputHeader"></h3>
    <p id="byteRangeFileContent"></p>
  </div>
  <div id="alert" style="color: red;"><!-- Fills the roll of console.log(). --></div>
</body>

</html>

 

 

Show:
© 2014 Microsoft