# Byte counter:
<!-- begin snippet: js hide: false -->
<!-- language: lang-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}#count{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=count>0 bytes</td><td>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></table> <input type=file id=fileinput onchange=filedialog(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(a){a.stopPropagation();a.preventDefault()}function drop(a){nodefault(a);$("#count").text(a.dataTransfer.files[0].size+" bytes")}function click(a){nodefault(a);$("#fileinput")[0].click()}function filedialog(a){$("#count").text(a[0].size+" bytes")}function textbox(a){$("#count").text((new Blob([a],{encoding:"UTF-8",type:"text/plain;charset=UTF-8"})).size+" bytes")}$(document).ready(function(){var a=function(){$("#textinput").height($(window).height()-$("#textinput").offset().top-20)};$(window).resize(a);a()});document.body.addEventListener("dragenter",nodefault,false);document.body.addEventListener("dragover",nodefault,false);document.body.addEventListener("drop",drop,false);$("#fileselect").on("click",click);</script> </body> </html>
<!-- end snippet -->