Quick JavaScript Interview Questions (2015)

Chapter 12. File API

Q. What is HTML5 File API?
ANSWER
HTML5 provides new API to work with files inside a browser. This API provides File, FileList and Blob data type to work with files. It provide FileReader interface to read files asynchronously.

Q. What are the methods provided by FileReader for asynchronous read?
ANSWER
FileReader provides 4 different methods to work with loaded files. These asynchronous methods are listed as follows.

readAsBinaryString(Blob | File) : Reads the target file and save it to binary string containing integer of range 0-255.
readAsText(Blob | File, opt_encoding): Reads the target file and save it as UTF-8 text file.

readAsDataURL(Blob | File) : Reads the target file and returns a data URL containing base64 ascii string. readAsArrayBuffer(Blob | File) : Reads the target file and save it in a array buffer.

Q. What is Blob object in javascript?
ANSWER
A blob object refers to a sequence of bytes representing data. The IDL(Interface Definition Syntax) for Blob object is as follows:

interface Blob {
readonly attribute unsigned long long size; readonly attribute DOMString type; Blob slice(optional [Clamp] long long start,

optional [Clamp] long long end, optional DOMString contentType); void close();
};

The details of the method and properties are as follows: slice method : The slice method returns a new Blob object

with bytes ranging from the optional start parameter up to but not including the optional end parameter, and with a type attribute that is the value of the optional contentType parameter

close method : The close method must permanently neuter the original Blob object. This is an irreversible and nonidempotent operation; once a Blob has been neutered, it cannot be used again; dereferencing a Blob URL bound to a Blob object on which close has been called results in a network error. A neutered Blob must have a size of 0.

size property: It returns the size of the Blob object in bytes. type property: It returns the type of the content that the Blob object holds.

Q. How to create a Blob Object?
ANSWER
A blob object can be created using new keyword with Blob constructor. A Blob constructor takes the following parameters:

Blob part sequence: This can be either ArrayBuffer, ArrayBufferView, Blob and DOMString

Blob property bag : It takes one parameter representing type of the ASCII-encoded string in lower case representing the media type of the Blob.

The following code shows an example of creating Blob using new keyword:
var a = new Blob();
var b = new Blob(["foobarbazetcetc" + "birdiebirdieboo"], {type: "text/plain;charset=UTF-8"});

Q. What are readable states for a Blob object?
ANSWER
A Blob must have a readability state, which is one of OPENED or CLOSED.

A Blob that refers to a byte sequence, including one of 0 bytes, is said to be in the OPENED readability state.

A Blob is said to be closed if its close method has been called. A Blob that is closed is said to be in the CLOSED readability state.

Q. What are different states of FileReader?
ANSWER
The FileReader object can be in one of 3 states. The readyState attribute, on getting, must return the current state, which must be one of the following values:

EMPTY : The FileReader object has been constructed, and there are no pending reads. None of the read methods have been called. This is the default state of a newly minted FileReader object, until one of the read methods have been called on it.

LOADING : A File or Blob is being read. One of the read methods is being processed, and no error has occurred during the read.

DONE : The entire File or Blob has been read into memory, OR a file error occurred during read, OR the read was aborted using abort(). The FileReader is no longer reading a File or Blob. If readyState is set to DONE it means at least one of the read methods have been called on this FileReader.