Read file to blob and display in javascript

Question

So I'm trying to create a basic prototype of a functionality. Essentially the end goal is to receive a Base64 encoded string and a support mime type and generate the file and serve it up from a HTML 5 APP. For now I'm working on simple getting a file, turning it into a Blob, and then displaying it, all from memory.

   var blobfile = atob(base64);
   window.blobFromBlob = new Blob([binaryString], {
     type: MIMEType
   });
   window.blobURL = URL.createObjectURL(window.blobFromBlob);
   var a = "<a href=\"" + window.blobURL + "\">Binary Blob Link</a>";
   document.getElementById('byte_content').innerHTML = a;

I've created a JSFiddle to show what I'm having trouble with. When I put, say a JPEG, into it and then try to serve it up the img tags show corrupt images. The Base64 blob I never expect to work, but the Binary blob and blob from base 64 I do expect to work.

Can anyone see where I'm going wrong?

Thanks!

NOTE: I managed to get the binary one to display by changing from readAsBinaryString to readAsArrayBuffer

NOTE 2: I'm beginning to suspect it has something to do with atob and btoa

Solution

So incase anyone else stumbles upon this and finds it useful I was able to solve this with help from this stackoverflow article. The solution involves leaving readAsBinaryString as the file reading method. Create the Base64 string with btoa and then use b64toBlob function found in the mentioned stackoverflow article.

Here is the adjusted JSFiddle to show how I got it to work.

https://jsfiddle.net/ajwhiteway/vstj3bcm/1/