JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.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;
}

#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;
}

img{
 width:150px;
    height:150px;
}
}

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 theImage = new Image();
        theImage.src = e.target.result;
        
        // Get accurate measurements from that.
        var imageWidth = theImage.width;
        var imageHeight = theImage.height;
        var imgdiv = $('#popup_box');
        $(imgdiv).append(image);
        image.Jcrop({
            /*onChange: function(coords){showPreview(coords, image);}, */
            onSelect: function(coords){showPreview(coords, image, imageWidth / image.width(), imageHeight /...