JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<input type="file" id="imagen" />
<label id="alto"></label>
<label id="ancho"></label>

CSS

label{
    display: block;
}

JavaScript

"use strict";

var input = document.querySelector("#imagen"),
	alto = document.querySelector("#alto"),
    ancho = document.querySelector("#ancho");

input.addEventListener("change", function(){
	let file = this.files[0], image = new Image();
    image.src = URL.createObjectURL(file);
    image.addEventListener("load", function(){
    	alto.innerHTML = "Alto: " + this.height + "px";
    	ancho.innerHTML = "Ancho: " + this.width + "px";
    }, false);
}, false);