JSFiddle - React, Tailwind, and code Playground

by Abhimanyu Pathania

HTML

<body>
    <label for="selectImage">Upload Image:</label>
    <input type="file" id="selectImage" />
    <br />
    <br />
    <p id="imageSize"></p>
    <div id="imageHolder"></div>
</body>

JavaScript

var imageHolder = $('#imageHolder');
        var selectImage = $('#selectImage');
        var imageSize = $('#imageSize');

        selectImage.change(function (event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function (event) {
                var img = new Image();
                img.src = event.target.result;
                img.onload = function () {
                    imageHolder.empty();
                    imageHolder.append(this);

                    var size = "Image size: " + this.width + " x " + this.height + " px";
                    imageSize.text(size);
                };

            };
            reader.readAsDataURL(file);
        });