JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="file" />
<input type="text" id="img_size" />

<img src="" id="fake_img" />

JavaScript

// Handle file while select a new file
$('#file').change(function () {
    $('#img_size').val((this.files[0].size) / 1000000);
    handleFiles(this.files);
});


// handle files
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            continue;
        }
        var img = document.getElementById('fake_img');
       /* img.src = file;
        img.onload = function () {
        }; */
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }

}