JSFiddle - React, Tailwind, and code Playground

HTML

<form id="online-checker" method="post" action="https://shattered.it/sample/submit" enctype="multipart/form-data">
          <div class="upload-select">
            <span class="glyphicon glyphicon-upload"></span>
            <p class="text-center checker-banner">Drag some files here</p>
            <p class="text-center">Or, if you prefer..</p>
            <span class="btn btn-info upload-dragndrop"> Choose a file to upload</span>
            <input class="upload-file hide" type="file" name="file" id="file">
          </div>
          <div class="upload-inprogress hide">
            <div class="progress progress-striped active">
              <div class="progress-bar progress-bar-info" style="width: 0%;"></div>
            </div>
          </div>
          <div class="upload-success hide"></div>
          <div class="upload-error hide"> Upload failed. Please upload files under 100 MB.</div>
          <div class="btn btn-inverse reset-upload hide"> Reset</div>
        </form>

JavaScript

var $uploadForm = $('#online-checker');
var $toUpload = null;
var $data = null;

$('.upload-dragndrop').on('click', function(e) {
  $('.upload-file').click();
});

$('.upload-file').on('change', function(e) {
  $toUpload = e.target;
  if($toUpload) {
    $uploadForm.trigger('submit');
  }
});

$('.reset-upload').on('click', function(e) {
  $toUpload = null;
  $('.upload-select').removeClass('hide');
  $('.upload-inprogress').addClass('hide');
  $('.upload-error').addClass('hide');
  $('.upload-success').addClass('hide');
  $('.reset-upload').addClass('hide');
});

$uploadForm.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  })
  .on('dragover dragenter', function() {
    $uploadForm.addClass('upload-dragover');
  })
  .on('dragleave dragend drop', function() {
    $uploadForm.removeClass('upload-dragover');
  })
  .on('drop', function(e) {
    $toUpload = e.originalEvent.dataTransfer;
    $uploadForm.trigger('submit');
  })
  .on('submit', function(e) {
    if ($uploadForm.hasClass('upload-inprogress')) return false;
    // Update UI.
    $('.upload-select').addClass('hide');
    $('.upload-inprogress').removeClass('hide');
    $('.upload-error').addClass('hide');
    $('.upload-success').addClass('hide');
    $('.upload-success').html('');
    $('.reset-upload').addClass('hide');
    $(".progress-bar").width("0%");
    // Prepare submission.
    e.preventDefault();
    var formData = new FormData();
    if($toUpload.files.length) {
      $.each($toUpload.files, function(i, file) {
        formData.append(file.name, file);
      });
    } else {
      
    }
    $.ajax({
        url: '/sample/submit',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress',...