JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<div class="input-group">
    <input type="text" class="form-control" id="avatarupload" readonly>
    <span class="input-group-btn">
        <span class="btn btn-primary btn-file">
            Browse… <input type="file" id="addButton">
        </span>
    </span>
</div>

JavaScript

//CSV Chart background File
$('#avatarupload').click(function(){
   $("#addButton").click();
});
$('#avatarupload, #addButton').change(function(){
	var filename = $("#addButton").val().replace(/.*(\/|\\)/, '');
	$("#avatarupload").val(filename);
	$(".has-error").removeClass("has-error");
	$(".formError").remove();
});


$('#addButton').click(function () {
        var avatar = $("#avatarupload").val();
        var extension = avatar.split('.').pop().toUpperCase();
        if(avatar.length < 1) {
            avatarok = 0;
        }
        else if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
            avatarok = 0;
            alert("invalid extension "+extension);
        }
        else {
            avatarok = 1;
        }
        if(avatarok == 1) {
            $('.formValidation').addClass("sending");
            $("#form").submit();
        }
        else {
            $('.formValidation').addClass("validationError");
        }
        return false;
    });