JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQM input file capture</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>

    <div data-role="page" id="page">
		<style>
			#preview {
				width: 80%; max-width: 300px;
			}
			#preview img {
				width: 100%;
			}
			.hiddenfile {
			 width: 0px;
			 height: 0px;
			 overflow: hidden;
			}
		</style>
        <div data-role="header">
             <h3>Header</h3>
        </div>
        <div data-role="content">
			<button id="chooseFile">Choose file</button>
			<div class="hiddenfile">
			  <input type="file"  data-clear-btn="false" name="image" accept="image/*" capture>
			</div>
      <img id="pic" alt="pic">
    </div>

    <script>
    $('#page').on('pageinit', function(){
		$("#chooseFile").click(function(e){
			e.preventDefault();
			$("input[type=file]").trigger("click");
		});
		$("input[type=file]").change(function(){
			var file = $("input[type=file]")[0].files[0];            
			displayAsImage3(file, "#pic");
		});
    });

    function displayAsImage3(file, imgid) {
		if (typeof FileReader !== "undefined") {
			var img = $(imgid), reader;
			reader = new FileReader();
			reader.onload = (function (theImg) {
      	
				return function (evt) {
					theImg.src = evt.target.result + "?t=&" + Math.random();
          alert(theImg.src);
				};
			}(img));
			reader.readAsDataURL(file);
		}
	}
	
    </script>
</body>
</html>