JSFiddle - React, Tailwind, and code Playground

HTML

<div class="warning template">
  <div class="warning">
    <br/>
    <big class="title"></big>
    <div class="text"></div>
    <br/>
  </div>
</div>
<div class="col-sm-10">
  <input type="file" class="form-control other_images" name="other_images[]" accept="image/*" multiple />
  <br/>
  <div id="errors"></div>
  <div class="showcase"></div>
  <form id="myAwesomeForm" method="post" enctype='multipart/form-data' action="https://httpbin.org/post">
    <!-- Empty Form will be automatically submitted with valid files -->
  </form>
</div>

CSS

.template {
  display: none;
}

img.error {
  border: 2px solid red;
  box-shadow: 0px 0px 50px 5px red;
  margin: 15px;
}

img {
  max-width: 200px;
  max-height: 200px;
}

JavaScript

var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // Otherwise, check if XDomainRequest.
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // Otherwise, CORS is not supported by the browser.
    throw new Error('CORS not supported');
  }
  return xhr;
};

$(document).ready(function() {
  var log = console.log
  var validFiles = [];
  var invalidFiles = [];

  var form = document.getElementById("myAwesomeForm");
  var formDataToUpload = new FormData(form);

  var onChangeCallback = function(event) {
    var max_image_size = 0.005; //MB
    var warningTemplate = $('.warning.template').clone().html();
    var templateCopy;
    for (var i = 0; i < $(".other_images").get(0).files.length; i++) {
      var currFile = this.files[i];
      var validImageTypes = ["image/jpeg", "image/png"];

      var fileTypeNotification = '<b>' + currFile.name + '</b> is of type: <i>' + currFile.type + '</i>';
      fileTypeNotification += '<br/>Allowed file types are: ' + validImageTypes.join(', ');
      var fileSizeNotificaiton = '<b>' + currFile.name + '</b> is of size: <i>' +
        currFile.size / (1024 * 1024) + ' MB </i>';
      fileSizeNotificaiton += '<br/>Allowed maximum size is ' + max_image_size + ' MB';

      var hasTypeError = $.inArray(currFile.type, validImageTypes) < 0;
      if (hasTypeError) {
        templateCopy = $(warningTemplate);
        templateCopy.find('.title').html('File Type Error');
        templateCopy.find('.text').html(fileTypeNotification + '.<br/>Your file is invalid type!');
        templateCopy.appendTo('#errors');
      }

      var hasSizeError =...