JSFiddle - React, Tailwind, and code Playground

HTML

<form id="id" method="post" enctype="multipart/form-data" action="http://jquery.com/" target="uiUloadFrame">
      <div id="uiContainerA" style="width:500px;height:100px;border:1px solid black">
        <input id="uiUloadFile" name="uiUloadFile" type="file" />
      </div>
      <div id="uiContainerB" style="display:none;width:500px;height:100px;border:1px solid black">
        <p>There is no bug!</p>
      </div>
    </form>
    <iframe id="uiUloadFrame" name="uiUloadFrame" src="about:blank" style="display:none"></iframe>

JavaScript

jQuery.noConflict();
      (function($) {
        $.widget( "ui.bug", {
          version: "0.1",
          options: {
            containerA: "uiContainerA",
            containerB: "uiContainerB",
            uploadFileName: "uiUloadFile",
            minimal: false,
          },

          _create: function() {
            var o = this.options;

            var file = $("#" + o.uploadFileName);
            var form = file.parent().parent();
            file
              .change(
                function() {
                  if (o.minimal) {
                    $("#" + o.containerA).hide("slide", {direction:"left"}, 500, function() { form.submit(); });
                  } else {
                    var submit = function() { form.submit(); };
                    var slide2 = function() { $("#" + o.containerB).show("slide", {direction:"right"}, 500,  submit) };
                    $("#" + o.containerA).hide("slide", {direction:"left"}, 500, slide2);
                  }
                }
              )
          }
        });
      })(jQuery);

      jQuery(document).ready(function(){
        jQuery("#id").bug({minimal: false});
      });