JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data">
  <input type='file' multiple="multiple" name="uploads[]" id="uploads" />
  <div class="preview user-uploads" id="preview"></div>
</form>

CSS

.user-uploads__row {
  background: #fff;
  padding: 20px;
  border: 1px solid #888;
  margin: 20px;
}

JavaScript

jQuery("#uploads").change(function() {
      prepPreview(this);
    });

    function prepPreview(input) {
      var container = document.getElementById("preview");

      var files = jQuery(input).get(0).files;
      for (var i = 0; i < files.length; i++) {
           
        // create canvas element & resize image
        var canvasEl = document.createElement("canvas");
        canvasEl.id = 'canvas_' + i;
        canvasEl.width = "250";
        canvasEl.height = "140";
        container.appendChild(canvasEl);
       var canvas = document.getElementById('canvas_' + i);
       var context = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = (function(canvas,context) {
           return function (){
       
           	 var imageObj = new Image()
             imageObj.src = this.result;
             imageObj.onload = (function(canvas,context) {
              return function (){
              var wrh = imageObj.width / imageObj.height;
              var newWidth = canvas.width;
              var newHeight = newWidth / wrh;
              if (newHeight > canvas.height) {
              newHeight = canvas.height;
              newWidth = newHeight * wrh;
              context.drawImage(imageObj, 0, 0, newWidth, newHeight);
            
              }
            }
          })(canvas,context);
           }
        })(canvas,context)
        reader.readAsDataURL(files[i], 'canvas_' + i);
        console.log(files[i], 'canvas_' + i);
			
      	// create input
        var input = document.createElement("input");
        input.type = "text";
        input.setAttribute('maxLength', 150);
        input.name = "caption[" + i + "]";
        container.appendChild(input);
        
        // create row around image/input
        var row = document.createElement("div");
        row.className = 'user-uploads__row';
        canvasEl.parentNode.insertBefore(row, canvasEl, input);
        row.appendChild(canvasEl);
       ...