JSFiddle - React, Tailwind, and code Playground

by joshuatz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="file" id="MainContent_fluploadData" Style="padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px;" CssClass="form-control" runat="server" onchange="return isFileValid();" />

JavaScript

function isFileValid() {
  var allowedFiles = [".xlsx", ".xls"];
  var fileUpload = document.getElementById("MainContent_fluploadData");
  var fileChanged = fileUpload.value!==window.lastUploadedFilename;
  window.lastUploadedFilename = fileUpload.value;
  var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");

  if (!regex.test(fileUpload.value.toLowerCase()) && fileUpload.value!=='') {                
    alert("Please upload files having extensions: " + allowedFiles.join(', ') + " only.");               
    $('#MainContent_fluploadData').val('');
    return false;
  }
}