JS convert blob url to Base64 file

Question

There is the following code:

console.log(blob);
var reader = new window.FileReader();
reader.onloadend = function() {            
  console.log(reader.result);
};
reader.readAsDataURL(blob);

blob is 'blob:http://localhost:3000/e3c23a22-75b1-4b83-b39a-75104d1909b9' and I've got the following error:

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

How can I fix this error and convert Blob to Base64 encoded image? Thanks in advance!

Answer 1

I know this is an old question, but I came across this problem lately and it took me a while to fix it. So I am going to answer the question in case anyone run into it again.

First, I think the naming of variable blob is very confusing. Blob URLs and Blob Object are different things. This answer does a very good job explaining what a Blob URL is. I think you should rename it as below.

var blobUrl = 'blob:http://localhost:3000/e3c2...'

Then, the function readAsDataURL of FileReader requires a Blob Object as its parameter. And what you give it is the variable blob, which is a Blob URL.

So what you need to do is:

1. Recover the Blob Object that is used to create the Blob URL
2. Use readAsDataURL to convert the recovered Blob Object to base64 url

Here is the code I find in this answer:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();