Convert URL to File or Blob for FileReader.readAsDataURL

Question

Reference: FileReader.readAsDataURL

Considering the following example:

function previewFile(file) {

  var reader  = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  }
  reader.readAsDataURL(file);
}

It states:

instanceOfFileReader.readAsDataURL(blob);

blob: The Blob or File from which to read.

1. How can a local file URL like: 'file:///C:/path-to/root.png' be passed to the readAsDataURL()

2. Is FileReader() available in a Firefox Addon?

Answer 1

To convert a URL to a Blob for FileReader.readAsDataURL() do this:

var request = new XMLHttpRequest();
request.open('GET', MY_URL, true);
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload =  function(e){
        console.log('DataURL:', e.target.result);
    };
};
request.send();