JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center">
       
        <form:form modelAttribute="profilePic" method="POST"enctype="multipart/form-data" action="/SpringMvc/addImage" onsubmit="return Validate();">
           
                    <input type="file" name="fileUpload" size="50" />
              
                        
                    <input type="submit" value="Add Picture" />
               
        </form:form>
    </div>

JavaScript

function Validate(){
  var image =document.getElementById("file").value;
  if(image!=''){
	var checkimg = image.toLowerCase();
	if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
	 alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
	 document.getElementById("file").focus();
	 return false;
	}
  }
  return true;
 }