طول و عرض تصویر داخل file input با جاوا اسکریپت

سلام دوستان..
file input برای تصویر دارم..
میخوام وقتی توی file input یه تصویر انتخاب شد قبل از اینکه اونو توی img نشون بدم از طریق جاوا اسکریپت طول و عرضشو مقایسه کنم اگر برابر بود (تصویر مربعی بود) برام توی img لود کنه در غیر اینصورت alert بده...

هر کار میکنم نمیتونم طول و عرض تصویر اون فایل انتخابی رو بدست بیارم.. ممنون میشم راهنماییم کنید..

سلام به این صورت

<!DOCTYPE html>
<html>
    <head>

        <meta charset=utf-8 />
        <title>JS Bin</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
        <style>
            article, aside, figure, footer, header, hgroup,
            menu, nav, section { display: block; }
        </style>
    </head>
    <body>
        <input type='file' />
        <img id="blah" src="#" alt="your image" />
        <script class="jsbin"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script  class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <script>
            document.querySelector('input').addEventListener('change' ,  function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result)
                        const img = new Image();
                        img.onload = function() {
                            console.log(this.width + 'x' + this.height);
                        }
                        img.src = e.target.result
                    };

                    reader.readAsDataURL(this.files[0]);
                }
            })

        </script>
    </body>
</html>