JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="jquery.upload.js"></script>

<body>

    <input class="multiupload" name="photo[]" type="file" accept="image/*" multiple/>
    <div id="layout">

        <button class="export5" data-toggle="modal" data-target="#modal5">  <img id="getimage5" src="">
        </button><br>
        <button class="export1" data-toggle="modal" data-target="#modal1">  <img id="getimage1" src="">
        </button>
        <button class="export2" data-toggle="modal" data-target="#modal2">  <img id="getimage2" src="">
        </button>
        <button class="export3" data-toggle="modal" data-target="#modal3">  <img id="getimage3" src="">
        </button>
        <button class="export4" data-toggle="modal" data-target="#modal4">  <img id="getimage4" src="">
        </button><br>
        <button class="export6" data-toggle="modal" data-target="#modal6">  <img id="getimage6" src="">
        </button>

    </div>


    <div id="layout">

        <button class="export11" data-toggle="modal" data-target="#modal11">  <img id="getimage11" src="">
        </button><br>
        <button class="export7" data-toggle="modal" data-target="#modal7">  <img id="getimage7" src="">
        </button>
        <button class="export8" data-toggle="modal" data-target="#modal8">  <img id="getimage8" src="">
        </button>
        <button class="export9" data-toggle="modal" data-target="#modal9">  <img id="getimage9" src="">
        </button>
        <button class="export10" data-toggle="modal" data-target="#modal10">  <img id="getimage10" src="">
        </button><br>
        <button class="export12" data-toggle="modal" data-target="#modal12">  <img id="getimage12" src="">
        </button>

    </div>

    <div class="modalloader"><!-- Place at bottom of page --></div>

<script>
        
</script>

</body>

CSS

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
        .modalloader {
            display:    none;
            position:   fixed;
            z-index:    1000;
            top:        0;
            left:       0;
            height:     100%;
            width:      100%;
            background: rgba( 255, 255, 255, .8 )
            url('https://www.incredible-web.com/media/1087/ajax_loaders.png')
            50% 50%
            no-repeat;
        }

        /* When the body has the loading class, we turn
           the scrollbar off with overflow:hidden */
        body.loading {
            overflow: hidden;
        }

        /* Anytime the body has the loading class, our
           modal element will be visible */
        body.loading .modalloader {
            display: block;
        }

        #getimage1, #getimage2, #getimage3, #getimage4, #getimage5, #getimage6, #getimage7, #getimage8, #getimage9, #getimage10, #getimage11, #getimage12 {
            height: 50px;
            width: 50px;
            border:1px solid grey;
        }

JavaScript

var processImg = function( img, imgNum ) {
  var getimage= '#getimage' + imgNum;
  // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
  var canvas = document.createElement("canvas");

  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  var posh, posw;
  var factheight = img.height;
  var factwidth = img.width;
  if (factwidth<factheight) {
    canvas.width = img.width;
    canvas.height = img.width;
    posh = (img.height-img.width)/2;
    posw = 0;
  }
  else if (factheight < factwidth) {

    canvas.height = img.height;
    canvas.width = img.height;
    posh = 0;
    posw = (img.width-img.height)/2;
  }
  else {
    canvas.width = img.width;
    canvas.height= img.height;
    posh = 0;
    posw = 0;
  }
  ctx.drawImage(img, posw, posh, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  $(getimage).attr("src", canvas.toDataURL("image/png")); // SHOW THE IMAGES OF THE BROWSER.
};


var setImage = function( imgNum, e ) {
  var img = new Image();
  img.src = e.target.result;
  img.onload = processImg.bind( this, img, imgNum );
};


var handleImageUploads = function () {
  if (parseInt($(this).get(0).files.length) > 12 || parseInt($(this).get(0).files.length) < 12) {
    alert("Please upload 12 photos");
  }
  else {
    //loop for each file selected for uploaded.
    for (var i = 0; i < 12; i++) {
      var reader = new FileReader();
      reader.onload = setImage.bind( this, i+1 );
      reader.readAsDataURL($('.multiupload')[0].files[i]);
    } // for
    console.log("done");
    $('body').removeClass("loading");
  }; // else
};

$('.multiupload').on("change", handleImageUploads);