JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
	<form>
	<div class="form-file">
		<label for="file-upload" class="from-label">File Upload</label>
		<input class="form-control" name="file-upload" id="file-upload" type="file">
	</div>
	</form>
	
</body>

</html>

JavaScript

jQuery(document).ready(function(){
	jQuery('.form-file input').each(function () {
        $this = jQuery(this);
        $this.on('change', function() {
            var fsize = $this[0].files[0].size,
                ftype = $this[0].files[0].type,
                fname = $this[0].files[0].name,
                fextension = fname.substring(fname.lastIndexOf('.')+1);
                validExtensions = ["jpg","pdf","jpeg","gif","png","doc","docx","xls","xlsx","ppt","pptx","txt","zip","rar","gzip"];
            
            if ($.inArray(fextension, validExtensions) == -1){
                alert("This type of files are not allowed!");
                this.value = "";
                return false;
            }else{
                if(fsize > 3145728){/*1048576-1MB(You can change the size as you want)*/
                   alert("File size too large! Please upload less than 3MB");
                   this.value = "";
                   return false;
                }
                return true;
            }
        
        });
    });
});