JSFiddle - React, Tailwind, and code Playground

HTML

<button id="choose">
Upload
</button>

JavaScript

var allowedExtensions = ['png', 'jpeg', 'jpg'];
var maxSize = 5242880;
$('body').on('click', '#choose', function(e) {
  var input = $(document.createElement("input"));
  input.attr("type", "file");
  input.attr('accept', '.' + allowedExtensions.join(', .'));
  input.on('change', function(event) {
    if (event.target.files.length === 1) {
      var file = event.target.files[0];
      var size = file.size;
      var type = file.type;
      //getting just last part
      type = type.substring(type.indexOf('/') + 1);
      //checking if allowed
      if (allowedExtensions.indexOf(type) === -1) {
        alert('File not supported', 'Currently we only support ' + allowedExtensions.join(', '), 'warning');
        return;
      }
      console.log(file);
      //max Size
      if (size > maxSize) {
        alert('File size shouldnot be more than 5MB');
        return;
      }
      //crop

      /*
      //uploading
      var formData = new FormData();
      formData.append("file", file);
      formData.append("name", file.name);
      formData.append("extension", type);
      formData.append("id", 0);
      formData.append("post_id", 0);


      $.ajax({
        url: 'url',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        dataType: "json",
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(response, textStatus, jqXHR) {
          if (response.flash === 'success') {

          }
          alert(response.message);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          alert('Upload Failed, Failed to upload. Try again');
        }
      });
      */
    }
  });
  input.trigger("click"); // opening dialog
});