apcurran/img-dimensions.html

## img-dimensions.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Img Upload With Dimensions</title>
</head>
<body>
    <input class="file-input-btn" type="file" name="" id="">

    <script>

        "use strict";

        const fileBtn = document.querySelector(".file-input-btn");
        const uploadBtn = document.querySelector(".upload-btn");

        async function getImgFile(event) {
            try {
                const file = event.target.files[0];
                const fileAsDataUrl = window.URL.createObjectURL(file);
                const imgDimensions = await getImgDimensions(fileAsDataUrl);

                console.log(imgDimensions);

            } catch (err) {
                console.error(err);
            }
        }

        const getImgDimensions = (dataUrl) => new Promise(resolve => {
            const img = new Image();

            img.onload = () => {
                resolve({
                    width: img.width,
                    height: img.height
                });
            };
            img.src = dataUrl;
        });

        fileBtn.addEventListener("change", getImgFile);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Img Upload With Dimensions</title>
	</head>
	<body>
	<input class="file-input-btn" type="file" name="" id="">

	<script>

	"use strict";

	const fileBtn = document.querySelector(".file-input-btn");
	const uploadBtn = document.querySelector(".upload-btn");

	async function getImgFile(event) {
	try {
	const file = event.target.files[0];
	const fileAsDataUrl = window.URL.createObjectURL(file);
	const imgDimensions = await getImgDimensions(fileAsDataUrl);

	console.log(imgDimensions);

	} catch (err) {
	console.error(err);
	}
	}

	const getImgDimensions = (dataUrl) => new Promise(resolve => {
	const img = new Image();

	img.onload = () => {
	resolve({
	width: img.width,
	height: img.height
	});
	};
	img.src = dataUrl;
	});

	fileBtn.addEventListener("change", getImgFile);

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