JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file" />
<div class="new-multiple"></div>

CSS

.new-multiple {
  width: 400px;
  height: 300px;
  background: white;
  border: 2px solid red;
  overflow: hidden;
}

.img-div {
  padding: 22px 2px 2px 2px;
  display: inline-block;
  background-color: #ccc;
  border: 1px solid #aaa;
  border-radius: 6px;
}

.img-div-handle {
  margin: -20px 0 0 0;
  padding: 0;
  width: 100%;
  height: 20px;
}

.newly-added {
  margin: 0;
  padding: 0;
  border-radius: 3px;
}

JavaScript

$(function() {
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function previewImages(e) {
    console.log(new Date());
    var fileList = this.files;

    var anyWindow = window.URL || window.webkitURL;

    $.each(fileList, function(key, val) {
      var objectUrl = anyWindow.createObjectURL(val);
      var $newDiv = $("<div>", {
          id: "img-div-" + key,
          class: "img-div"
        })
        .draggable({
          handle: ".img-div-handle"
        })
        .append($("<div>", {
          class: "img-div-handle"
        }))
        .appendTo($('.new-multiple'));
      var imgDim = {
        width: 0,
        height: 0
      };
      var newImg = new Image();
      $(newImg).attr({
        src: objectUrl,
        id: "img-" + key,
        class: "newly-added"
      }).load(function(e) {
        console.log(new Date(), "\r\nLoading Image:", this.width, this.height);
        imgDim.width = this.width;
        imgDim.height = this.height;
        $(newImg).appendTo($newDiv).css({
          width: imgDim.width + "px",
          height: imgDim.height + "px"
        });
      });

      console.log(newImg, imgDim);
      $(newImg).resizable();
      window.URL.revokeObjectURL(val);
    });
  }
});