(Pure JS) Read image size when uploading image

by hugogo7646

HTML

<input id="imageUploader" type="file" accept="image/*"/>
<br/>
<img id="imageDisplayer" style="width : 300px; height: auto;"/>

CSS

body{
  height : 300;
}

JavaScript

var imageUploader = document.getElementById("imageUploader");
imageUploader.addEventListener("change", function(){
	window.URL;
  var image = new Image();
  image.onload = function(){
  	var width = image.naturalWidth | image.width;
    var height = image.naturalHeight | image.height;
  	console.log("width: " + width + ", height: " + height);
  };
  var objectURL = window.URL.createObjectURL(this.files[0]);
  image.src = objectURL;
  document.getElementById("imageDisplayer").src = objectURL;
});