JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.personalprints.com.au/product_images/jquery.Jcrop.min.js"></script>
<script src="http://www.personalprints.com.au/product_images/jquery.Jcrop.js"></script>
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV--> 
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>  
<a id="popupBoxClose">close</a> </div>
<div id="container"> <!-- Main Page --> 
  
</div>

CSS

#popup_box {
    display:none; /* Hide the DIV */
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6 */  
    height:200px;  
    width:200px;  
    background:#FFFFFF;  
    left: 50px;
    top: 50px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;  
   
    /* additional features, can be omitted */
    border:2px solid #ff0000;      
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;
   
}
#popup_box img{ height:200px; width:200px}
#container {
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}

a{ 
cursor: pointer; 
text-decoration:none; 
}

/* This is for the positioning of the Close Link */
#popupBoxClose {
    background: url("/close.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    font-size: 20px;
    line-height: 26px;
    position: absolute;
    right: -28px;
    top: -14px;
}

JavaScript

$(document).ready( function() {
$(".uploadphoto").click(function() {
    if(document.getElementById('files').files.length == 0){
	  alert('Select an Image first');
      return false;
	  }else {
         // When upload button is pressed, load the Popupbox First
       loadPopupBox();
              }
        $('#popupBoxClose').click( function() {           
            unloadPopupBox();
        });
       
        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style       
                "opacity": "1" 
            });
        }   
        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "1.5" 
            });        
        }  
    });
	
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
    
    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
	var imgdiv = $('#popup_box');
    $(imgdiv).append(image);
 // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};
$(".uploadphoto").click(function() {

    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           

});

$(function(){

	$('#popup_box img').Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
		aspectRatio: 1
	});

});
function showPreview(coords)
{
	var rx = 100 / coords.w;
	var...