Thursday, January 16, 2020

Covert blob to string in Javascript to support in IE (Internet Explorer) browser

If you would like to covert stream of bytes (blob) to string in client side, you can easily done with below few lines of code using text() method.

 // Easy way  
 var blb = new Blob(["Lorem ipsum sit"], {type: "text/plain"});  
 var strValue = '';  
 new Response(blb).text().then(t => {  
 console.log(t);  
 });  


Above code does not work in IE browser. if you see below table, you can understand the syntax supported by each browser.


So, above text() method won't work in IE browser. To fix this, we can FileReader to read the blob value. we have to attach "loadend" event to FileReader which will get triggered after read completed. Once read completed, we can get the completed blob object into string. please refer the below code.


 // IE FIX  
 var  blb = new Blob(["Lorem ipsum sit - IE FIX"], {type: "text/plain"});  
 var strValue = '';  
 const readText = (blobString) => {  
  console.log(blobString);  
 }  
 // Since IE not supporting text(), we are using FileReader to convert the blob to string.  
 const showLocalError = this.showError;  
 const reader = new FileReader();  
 // this event get triggered once read from blob is completed. once loadend event triggered, we can retrieve the value.  
 reader.addEventListener('loadend', function () {  
  if (reader && reader.result) {  
      readText(reader.result.toString());  
  } else {  
      console.log('Error in converting blob to string');  
  }  
 });  
 // using readAsText, we are start to reading the blob. Once reading completed, loadend event will get trigged   
 reader.readAsText(blb);