JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <input type="file" id="file_upload_1" name='file_upload_1' class="file_upload" />
  <!-- AND THEN, OTHER INPUT FORM FIELDS FOLLOW -->

</body>

JavaScript

var fileInput = $("#file_upload_1");
var MaxAllowedSize = 2000; // 2KB
var sizeKMGB = "2KB";

fileInput.on("change", function(evt) {
  var objFile = $(this);
  var fileSize = document.getElementById("file_upload_1").files[0].size;
  console.log(fileSize);
  if (fileSize > MaxAllowedSize) {
    // RESET THE UPLOAD TO NOTHING... SO USER CAN UPLOAD AGAIN...
    var fSize = parseFloat(fileSize / 1000).toFixed(2);
    var sUnit = fSize + "KB";
    if (fSize >= 100) {
      fSize = parseFloat(fileSize / (1000 * 1000)).toFixed(2);
      sUnit = fSize + "MB";
    }
    objFile.val(null);
    alert("Upload File-size Must not exceed " + sizeKMGB + ". \nYou tried to upload a File with bout " + sUnit + ".")
  }
});