Javascript onLoad File api event not firing

Question

I have a small snippet of code

<input type="file"  style="margin-left:10px" id="file"/>

and JavaScript snippet is

<script type="text/javascript">
  function compress(evt){
  console.log('coming here');
                   var f = evt.target.files[0]; 
                   var r = new FileReader();
               r.onload = function(e) { 
               console.log('coming here also');

               var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn");  
      }

        }

      document.getElementById('file').addEventListener('change', compress, false);

</script>

In console I can see coming here but r.onload function is not working. Can anyone please tell why its not working. I am using chrome latest version.

Answer 1

you need to use readAs* method, if your file type is image, do like:

var f = evt.target.files[0];
var imageType = /image.*/;
if (f.type.match(imageType)) {
    var r = new FileReader();
    r.onload = function(e) { 
        var result = r.result;
        console.log(result);
    }
    r.readAsDataURL(f); 
}