JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//hayageek.github.io/jQuery-Upload-File/uploadfile.min.css">
<script src="//hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<!--  
jsFiddle ONLY requires these be Uploaded via Resources panel
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
-->
<div id="myOverlay"></div>
<div id="box">
    <div id="box-inside-div">
        <div id="fileuploader"></div>
    </div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
     <h1>Hayageek Upload File Example</h1>

    <p>To upload a file, click the button below</p>
    <!--<input type="button" id="myButt" value="Upload" />-->
	 <img src="http://placeimg.com/50/50/animals" id="myButt" ><br>
	 Click Pic
</div>

CSS

#myOverlay {
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    background:#000044;
    opacity:0.7;
    display:none;
    z-index:10;
}
#box {position:absolute;top:100px;left:100px;height:200px;width:450px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
.ajax-upload-dragdrop{width:400px !important;}

JavaScript

$('#myButt').click(function () {
    $('#myOverlay').show();
    $("#box").show();
    $("#fileuploader").uploadFile({
        url: "upload_recv.php",
        fileName: "myfile",
        onError: function(files,status,errMsg){
            /* Error because (1) jsFiddle cannot do ajax */
            /* AND (2) there is no upload_recv.php file! */
            $('#myOverlay').hide();
            $('#box').hide();
            alert('The file is now on the server');
        }
    });
});//END mybutt.click