JSFiddle - React, Tailwind, and code Playground

by Prashant Chaurasia

HTML

<link rel="stylesheet" href="https://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" style="min-width:100px;min-height:100px;"></div>

CSS

.new-multiple{
  width:auto;
  height:auto;
  
  background:white;
  border:2px solid red;
  overflow:hidden;
  display: inline-block;
  }
  
 .img-div{
   width:200px;
   height:200px;
 } 
 .newly-added{
    width:100%;
    height:100%;
} 

.img-selected{
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
}

JavaScript

$( function() {

        var inputLocalFont = document.getElementById("user_file");
        inputLocalFont.addEventListener("change",previewImages,false);

        function previewImages(){
            var fileList = this.files;

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

                for(var i = 0; i < fileList.length; i++){
                  var objectUrl = anyWindow.createObjectURL(fileList[i]);
                  $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>').attr('style','');;
                  window.URL.revokeObjectURL(fileList[i]);
                }

               $( ".img-div" ).draggable();
              $( ".img-div" ).resizable();
              $(".newly-added").on("click", function(e) {
	   $(".newly-added").removeClass("img-selected");
       $(this).addClass("img-selected");
	    e.stopPropagation()
    });

	  $(document).on("click", function(e) {
		if ($(e.target).is(".newly-added") === false) {
		  $(".newly-added").removeClass("img-selected");
		}
	  });
              
              } 
});