JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="file" id="upload" name="upload" />
    <input type="submit" name="submit" id="submit" />
</form>

JavaScript

// by default, submit is disabled
$("#submit").attr("disabled", "true");

$("#upload").on('change', function () {

    var val = $(this).val().toLowerCase();

    if (!val) {
        alert('upload your photo');
        $(this).focus();
        $("#submit").attr("disabled", "true");
        return false;
    } else {
        var regex = new RegExp("(.*?)\\.(jpg|jpeg|txt|png|docx|gif|doc|pdf|xml|bmp|ppt|xls)$");
        if (!(regex.test(val))) {
            $(this).val('');
            alert('Unsupported file');
        }

        $("#submit").removeAttr("disabled");
    }

});