Export (0) Print
Expand All

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.

Internet Explorer 10

 

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.

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 alert(). --></div>
</body>

</html>

 

 

Show:
© 2014 Microsoft