JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<input type="file" id="images" />
<img id="blah" width="150" />

JavaScript

// ===========for checking the size of an image
$(document).on('change', '#images', function () {
    files = this.files;
    size = files[0].size;
    //max size 50kb => 50*1000
    if (size < 1000141) {
        readURL(this);
        return true;
    }
    alert('File size greater than 1MB cannot be uploaded');
    return false;
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
            $('#blah').show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}