First, we need to get the selected file, and then load it via FileReader
:
const avatarEle = document.getElementById('avatar');
const sizeEle = document.getElementById('size');
avatarEle.addEventListener('change', function (e) {
// Get the selected file
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('loadend', function (e) {
const src = e.target.result;
calculateSize(src).then(function (data) {
const width = data.width;
const height = data.height;
sizeEle.innerHTML = `${width} x ${height}`;
});
});
});