Post
Ask Question

Convert File into base64 in JavaScript using FileAPI

Since the File API is introduced in HTML5, we have ability to access and modify files pragramaticaly in JavaScript , here is an example of select a file using input tag and converting this binary file into base64 format.
  1. <input type="file" id="files" name="files" />    
  2. <br/>    
  3. <textarea id="base64" rows="5"></textarea>   
Checkout working example @ http://codepen.io/AshishVishwakarma/pen/pjodjV.
  1. // Check for the File API support.    
  2. if(window.File && window.FileReader && window.FileList && window.Blob)  
  3. {  
  4.     document.getElementById('files')  
  5.         .addEventListener('change', handleFileSelect, false);  
  6. }  
  7. else  
  8. {  
  9.     alert('The File APIs are not fully supported in this browser.');  
  10. }  
  11.   
  12. function handleFileSelect(evt)  
  13. {  
  14.     var f = evt.target.files[0]; // FileList object    
  15.     var reader = new FileReader();  
  16.     // Closure to capture the file information.    
  17.     reader.onload = (function (theFile)  
  18.     {  
  19.         return function (e)  
  20.         {  
  21.             var binaryData = e.target.result;  
  22.             //Converting Binary Data to base 64    
  23.             var base64String = window.btoa(binaryData);  
  24.             //showing file converted to base64    
  25.             document.getElementById('base64')  
  26.                 .value = base64String;  
  27.             alert('File converted to base64 successfuly!\nCheck in Textarea');  
  28.         };  
  29.     })(f);  
  30.     // Read in the image file as a data URL.    
  31.     reader.readAsBinaryString(f);  
  32. }