JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog_up" title="Image upload dialog">
  <label class="filebutton" style="padding:0;">
  <img style="width:60px; height:60px;" id="up_img" src="http://i.stack.imgur.com/0CD2D.png" alt="upload" border="0"/> <span>
  <form method="post" enctype="multipart/form-data"  action="<?php echo Yii::app()->request->baseUrl?e">
    <input type="file" name="images" id="images" class="images"  style="width:20%;"/>
    <input type="hidden" id="img_name" name="img_name"/>
    <button type="submit" id="btn"></button>
  </form>
  </span>
  </label>
</div>

CSS

.fileupload {
	position: relative;
	overflow: hidden;
	text-align:center;
	padding:9px 0 0 0px;
}
.fileupload input {
	position: absolute;
	top: 0;
	right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
	cursor: pointer;
	opacity: 0.0;
	filter: alpha(opacity=0); /* and all the other old opacity stuff you want to support */
	font-size: 300px; /* wtf, but apparently the most reliable way to make
	a large part of the input clickable in most browsers */
}
label.filebutton {
	width:60px;
	;
	height:60px;
	overflow:hidden;
	position:relative;/*float:left;*//*margin:7px 0 0 65px;*/
}
label span input {
	z-index:999;
	line-height:0;
	font-size:50px;
	position:absolute;
	top:-2px;
	left:-653px;
	opacity: 0;
	filter: alpha(opacity = 0);
	-ms-filter: "alpha(opacity=0)";
	cursor:pointer;
	_cursor:hand;
	margin:0;
	padding:0;
}

JavaScript

$(function() {
    $( "#dialog_up" ).resizable({
						 
						 start: function(e, ui) {
							 // alert($(".paper-area").width());
							//containment: ".paper-area",
							$(this).css({
							//  position: "absolute",
							 });
						},
						stop: function(e, ui) {
							 // containment: ".paper-area",
							$(this).css({
							//   position: "absolute",
							});
							
							var width = ui.size.width;
                            var height = ui.size.height;
                            var hereDrag = this;
                           if($(hereDrag).find('textarea').length > 0){
                             $(hereDrag).find('textarea').css('width', width-6);
                             $(hereDrag).find('textarea').css('height', height-15);
                          }
						  if($(hereDrag).find('img').length > 0){
							   
                            $(hereDrag).find('img').css('width', width);
                            $(hereDrag).find('img').css('height', height-10);
                          }
						}
					});
  });
(function () {
   
		//var User_image=$("#User_image");
		var up_img=$("#up_img");
			   // var input = $(".images");
		var input = document.getElementById("images");
		  
		formdata = false;
		
		function showUploadedItem (source) {
		up_img.attr('src',source);
		}
		
		if (window.FormData) {
		formdata = new FormData();
		document.getElementById("btn").style.display = "none";
		}
	
		input.addEventListener("change", function (evt) {
		//added for remove close button
		$('.ui-dialog-titlebar-close').hide();
		//document.getElementById("response").innerHTML = ""
		up_img.attr('src','<?php echo Yii::app()->request->baseUrl ?>/images/loader.gif');
		var i = 0, len = this.files.length, img, reader, file;
		for ( ; i < len; i++ ) {
			file = this.files[i];
			 if (!!file.type.match(/image.*/)) {
				if ( window.FileReader ) {
					reader = new FileReader();
						reader.onloadend = function (e) {...