orlp/gist:f639d5a3027c25ee6019

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
        overflow-y: hidden;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    }

    #wrapper {
        overflow-y: hidden;
        margin: 0;
        min-height: 100%;
        padding: 10px;
    }

    #fileinput { display: none; }
    #bytes, #chars { white-space: nowrap; font-weight: bold; font-size: 20px; padding-right: 10px;}
    td { vertical-align: middle; }
    table { margin-bottom: 10px; margin-right: 80px; }
    #textinput { width: 100%; box-sizing: border-box; }
</style>
<!--[if lte IE 6]>
    <style type="text/css">
    #container {
        height: 100%;
    }
    </style>
<![endif]-->

</head>

<body>
<div id="wrapper">
    <table><tr><td id="bytes">0 bytes</td><td rowspan=2>Drag and drop a file anywhere on this snippet, <a href="#" id="fileselect">select a file using a dialog</a>, or enter UTF-8 code in the textbox.</td></tr><tr><td id="chars">0 chars</td></tr></table>
<input type="file" id="fileinput" onchange="handle_file(this.files)">
<textarea id="textinput" onkeyup="textbox(this.value)" onchange="textbox(this.value)"></textarea>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function nodefault(e) {
    e.stopPropagation();
    e.preventDefault();
}

function handle_file(files) {
    var reader = new FileReader();
    reader.onload = function(e) {
        jQuery("#chars").text(reader.result.length + " chars");
    }
    reader.readAsText(files[0], "UTF-8");

    jQuery("#bytes").text(files[0].size + " bytes");
}

function textbox(val) {
    jQuery("#bytes").text((new Blob([val], {encoding:"UTF-8",type:"text/plain;charset=UTF-8"})).size + " bytes");
    jQuery("#chars").text(val.length + " chars");
}

function drop(e) {
    nodefault(e);
    handle_file(e.dataTransfer.files);
}

function click(e) {
    nodefault(e);
    jQuery("#fileinput")[0].click();
}

jQuery(document).ready(function() {
    var resize = function() {
        jQuery("#textinput").height(jQuery(window).height() - jQuery("#textinput").offset().top - 20);
    }

    jQuery(window).resize(resize);
    resize();
});

document.body.addEventListener("dragenter", nodefault, false);
document.body.addEventListener("dragover", nodefault, false);
document.body.addEventListener("drop", drop, false);
jQuery("#fileselect").on("click", click);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html, body {
	margin: 0;
	height: 100%;
	overflow-y: hidden;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	}

	#wrapper {
	overflow-y: hidden;
	margin: 0;
	min-height: 100%;
	padding: 10px;
	}

	#fileinput { display: none; }
	#bytes, #chars { white-space: nowrap; font-weight: bold; font-size: 20px; padding-right: 10px;}
	td { vertical-align: middle; }
	table { margin-bottom: 10px; margin-right: 80px; }
	#textinput { width: 100%; box-sizing: border-box; }
	</style>
	<!--[if lte IE 6]>
	<style type="text/css">
	#container {
	height: 100%;
	}
	</style>
	<![endif]-->

	</head>

	<body>
	<div id="wrapper">
	<table><tr><td id="bytes">0 bytes</td><td rowspan=2>Drag and drop a file anywhere on this snippet, <a href="#" id="fileselect">select a file using a dialog</a>, or enter UTF-8 code in the textbox.</td></tr><tr><td id="chars">0 chars</td></tr></table>
	<input type="file" id="fileinput" onchange="handle_file(this.files)">
	<textarea id="textinput" onkeyup="textbox(this.value)" onchange="textbox(this.value)"></textarea>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript">
	function nodefault(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function handle_file(files) {
	var reader = new FileReader();
	reader.onload = function(e) {
	jQuery("#chars").text(reader.result.length + " chars");
	}
	reader.readAsText(files[0], "UTF-8");

	jQuery("#bytes").text(files[0].size + " bytes");
	}

	function textbox(val) {
	jQuery("#bytes").text((new Blob([val], {encoding:"UTF-8",type:"text/plain;charset=UTF-8"})).size + " bytes");
	jQuery("#chars").text(val.length + " chars");
	}

	function drop(e) {
	nodefault(e);
	handle_file(e.dataTransfer.files);
	}

	function click(e) {
	nodefault(e);
	jQuery("#fileinput")[0].click();
	}

	jQuery(document).ready(function() {
	var resize = function() {
	jQuery("#textinput").height(jQuery(window).height() - jQuery("#textinput").offset().top - 20);
	}

	jQuery(window).resize(resize);
	resize();
	});

	document.body.addEventListener("dragenter", nodefault, false);
	document.body.addEventListener("dragover", nodefault, false);
	document.body.addEventListener("drop", drop, false);
	jQuery("#fileselect").on("click", click);
	</script>
	</body>
	</html>