JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-group col-md-6">
    <input type="text" class="form-control" placeholder="Search by Asset ID" maxlength="64" class="form-control" id="imageid" name="imageid"> <span class="input-group-btn">
    <button class="btn btn-default image-search" type="button">Search</button></span>

</div>

JavaScript

$(function () {
    var fileInput = document.getElementById("file"),
        renderButton = $("#renderButton"),
        submit = $(".submit"),
        imgly = new ImglyKit({
            container: "#container",
            ratio: 1 / 1
        });
    // As soon as the user selects a file...
    fileInput.addEventListener("change", function (event) {

        //CHECK FILE SIZE OF INPUT
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            //get the file size and file type from file input field
            var fsize = $('#file')[0].files[0].size;
            var ftype = $('#file')[0].files[0].type;
            var fname = $('#file')[0].files[0].name;
            var isValidSize = true;
            var filesize = (fsize / (1024 * 1024 * 10)).toFixed(2);

            if (fsize > 80000000) //do something if file size more than 1 mb (1048576)
            {
                $(".file-warning").html("<div class='alert alert-danger'><p>The image: <b>" + fname + "</b> is <b>" + filesize + " MB</b> and too big. Please reduce your image size to <b>1MB</b> or less.</p></div>");
                $("#file").css("border-color", "red");
                //alert("Type :"+ ftype +" | "+ fsize +" bites\n(File: "+fname+") Too big!");
                isValidSize = false; // this variable should be created somewhere at the top. It will keep the state of file-picker.
                return; //this will stop any further actions;
            }
            //IF FILE SIZE WAS TOO BIG AND WARNING THROWN, BUT NEW CORRECT FILE SIZE LOADED, CLEAR WARNING
            else {
                if (fsize < 80000000) {
                    $("#file").css("border-color", "#ccc");
                    $(".file-warning").empty();
                }
            }
        } else {
            alert("Please upgrade your browser, because your current browser lacks some new features we need!");
        }
        //END FILE SIZE CHECK

        var file;

        var fileToBlob...