HTML5 FileReader API

FileReader Interface

Creating a new instance of FileReader:

var reader = new FileReader();

FileReader methods:

readAsText() 

This method is used to read text file. It has two parameters, the first is for File or Blob object, the second is used to specify the encoding of file.

 

var reader = new FileReader();

reader.onload = function(e) {
  var text = reader.result;
}

reader.readAsText(file, encoding);

 

 

readAsDataURL()

The method takes in a File or Blob and produces a data URL. This is basically a base64 encoded string of the file data. You can use this data URL for things like setting the src property for an image. 

var reader = new FileReader();

reader.onload = function (e) {
    var dataURL = reader.result;
};

reader.readAsDataURL(file);

 

readAsBinaryString()

The method can be used to read any type of file. It returns the raw binary data from the file. If you use this method along with XMLHttpRequest.sendAsBinary(), you can upload any file to a server using javascript.

var reader = new FileReader();

reader.onload = function(e) {
  var rawData = reader.result;
}

reader.readAsBinaryString(file);

 

readAsArrayBuffer()

The readAsArrayBuffer() method will read a Blob or File object and produce an ArrayBuffer. An ArrayBuffer is a fixed-length binary data buffer. They can come in handy when manipulating files (like converting a JPEG image to PNG).

var reader = new FileReader();

reader.onload = function(e) {
  var arrayBuffer = reader.result;
}

reader.readAsArrayBuffer(file);

 

abort()

This method will stop a read operation.

 

Examples for FileReader API

Example 1: Reading Image Files

// fileInput = document.getElementById("fileInput");
// fileDisplayArea = document.getElementById("fileDisplayArea");
fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();

        reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";

            var img = new Image();
            img.src = reader.result;

            fileDisplayArea.appendChild(img);
        }

        reader.readAsDataURL(file);    
    } else {
        fileDisplayArea.innerHTML = "File not supported!"
    }
});