Read computer image using FileReader API

by Carlos Delgado

HTML

<div id="image-container">

</div>
<p>
 Select an image from your PC to convert it to Base64 and display it in this document
</p>
<input type="file" id="filetoRead" />

JavaScript

document.getElementById("filetoRead").addEventListener("change",function(){
  var file = this.files[0];

  if (file) {
  		if ((file.type == 'image/png') ||
          (file.type == 'image/jpg') ||          
          (file.type == 'image/jpeg')
          ){
      	
         var reader = new FileReader();

      reader.onload = function (evt) {
          var imgTag = '<img style="max-width:300px;" src="'+evt.target.result+'" alt="my image" />';
          document.getElementById("image-container").innerHTML = imgTag;
          alert("Image succefully loaded");
      };

      reader.onerror = function (evt) {
        console.error("An error ocurred reading the file",evt);
      };

      reader.readAsDataURL(file);
        
      }else{
      	alert("Please provide a png or jpg image.");
        return false;
      }
    }
},false);