Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use binary data object.

BLOB means Binary Large Object Block. It is a new type non-standard ECMAscript commonly used on web environments. You can find details about this object here.


BLOB object can be created in different ways. Basically, this object can be created without any parameter. There is a code example below to create an instance without parameter as below :

var blob = new Blob();

An array object or a string can be a constructor parameter of a BLOB. The second optional constructor parameter of BLOB defines data type of the given array object.

var blob = new Blob(['foo', 'bar'], {
		type : 'plain/text'


A BLOB object has 2 properties:

This returns the size of the data contained in a BLOB object in bytes. If there is no data in the BLOB object, size returns zero byte.
A string indicating the MIME type of the data contained in the BLOB. If the type is unknown, this string is empty.

Take a look below to see an example about how to get BLOB size:

var blob = new Blob('foobar');
var blobSize = blob.size; //returns 6 (bytes)


toString() and valueOf() can be used for this object. toString() returns string value of the data contained in the BLOB. valueOf() returns the primitive value of the BLOB object.

var blob = new Blob(['foo', 'bar']);
var base64StringData = blob.toBase64String(); //returns base64 encrypted data
blob.fromString('hello world');
blob.appendString('blob example');

All methods of the BLOB object are listed below.

Appends the binary data from the provided base64 parameter. fromBase64String replaces the whole data, this method adds to the end of the existing data.
Appends the binary data from the provided value with encoding parameter. fromString replaces the whole data, this method adds to the end of the existing data.
Sets the binary data from the provided base64 parameter. Opposite of toBase64String.
Sets the binary data from the provided value with encoding parameter. Opposite of toString.
Returns a new BLOB object containing the data in the specified range of bytes of the source BLOB.
Gets the Base64 string converted value of binary data.

Base64 Functions

There are two Base64 functions that both take JavaScript string and returns converted JavaScript string. In Smartface, both of them are sub-members of global object.

String (Base64) to String
String to String (Base64)

Check as below:

var toBase64 = global.btoa('Hello world'); //encode a string
var toStr = global.atob(toBase64); //decode the string, result will be 'Hello world'

Image & Blob

SMF.Bitmap.prototype.getBlob() function will return the binary data of image.

var img = new SMF.Bitmap("myimage.png");
var blob = img.getBlob();

Blob over XMLHttpRequest

 XMLHttpRequest is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the .overrideMimeType() method on the XMLHttpRequest object and is a workable solution.

var oReq = new XMLHttpRequest();"GET", url);
// retrieve data unprocessed as a binary string
oReq.overrideMimeType("text/plain; charset=x-user-defined");
/* ... */
var oReq = new XMLHttpRequest();
oReq.onload = function(e) {
  var blob = oReq.response; // not responseText
  /* ... */
}"GET", url);


The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page.

var img = new SMF.Image('avatar.png');
var formdata = new FormData();
formdata.append("username", "Smartface"); //fill the username field in the form
formdata.append("file1", img.getBlob(), "avatar.png"); //fill the file1 field in the form
var oReq = new XMLHttpRequest();
oReq.setRequestHeader("Content-Type", "multipart/form-data");"PUT", formdata);

readBlob method usage in fileStream

This method is used to get blob type content.

An example usage will be as below:

var file = new SMF.IO.File(path),
readerStream = file.openStream(,
data = readerStream.readBlob();
readerStream = null;