JSFiddle - React, Tailwind, and code Playground
HTML
<h1>
Look at console
</h1>
<br>
<input
id = 'input'
type = 'file'
value = 'click'
/>
JavaScript
/**
* get an image's dimensions using pure js
*/
var input = document.getElementById('input');
input.addEventListener("change", function() {
var file = this.files[0];
var img = new Image();
img.onload = function() {
var sizes = {
width:this.width,
height: this.height
};
URL.revokeObjectURL(this.src);
console.log('onload sizes', sizes);
console.log('onload this', this);
}
var objectURL = URL.createObjectURL(file);
console.log('change: file', file);
console.log('change: objectURL', objectURL);
img.src = objectURL;
});