sbussard/codeview.html

## codeview.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<style type="text/css">
	body {padding:0;margin:0;}
	#codearea {
		width: 80%;
		border-radius: 10px;
		padding:25px;
		margin:25px auto;
		background-color:#FAFAFA;
		border: 1px solid #ccc;
	}
</style>
</head>
<body>
  <pre id="codearea" contenteditable>Drag source file here</pre>
</body>
</html>

## codeview.js
function codeView(obj) {
	function onDragEnter(e) {
		e.stopPropagation();
		e.preventDefault();
	}

	function onDragOver(e) {
		e.stopPropagation();
		e.preventDefault();
	}

	function onDragLeave(e) {
		e.stopPropagation();
		e.preventDefault();
	}

	function onDrop(e) {
		e.stopPropagation();
		e.preventDefault();

		var file = e.dataTransfer.files[0];
		var start = 0;
		var stop = file.size - 1;
		var reader = new FileReader();
		var length =  (stop - start) + 1;
		var blob = file.webkitSlice(start, length);
		reader.readAsBinaryString(blob);

		reader.onloadend = function(evt) {
		  if (evt.target.readyState == FileReader.DONE) {
				var code = evt.target.result;
				obj.innerHTML = code.replace(/</g,"&lt;").replace(/>/g,"&gt;");
		  }
		};
	}

	obj.addEventListener('dragenter', onDragEnter, false);
	obj.addEventListener('dragover', onDragOver, false);
	obj.addEventListener('dragleave', onDragLeave, false);
	obj.addEventListener('drop', onDrop, false);
}

codeView(document.getElementById("codearea"));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
	<style type="text/css">
	body {padding:0;margin:0;}
	#codearea {
	width: 80%;
	border-radius: 10px;
	padding:25px;
	margin:25px auto;
	background-color:#FAFAFA;
	border: 1px solid #ccc;
	}
	</style>
	</head>
	<body>
	<pre id="codearea" contenteditable>Drag source file here</pre>
	</body>
	</html>
	function codeView(obj) {
	function onDragEnter(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function onDragOver(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function onDragLeave(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function onDrop(e) {
	e.stopPropagation();
	e.preventDefault();

	var file = e.dataTransfer.files[0];
	var start = 0;
	var stop = file.size - 1;
	var reader = new FileReader();
	var length = (stop - start) + 1;
	var blob = file.webkitSlice(start, length);
	reader.readAsBinaryString(blob);

	reader.onloadend = function(evt) {
	if (evt.target.readyState == FileReader.DONE) {
	var code = evt.target.result;
	obj.innerHTML = code.replace(/</g,"<").replace(/>/g,">");
	}
	};
	}

	obj.addEventListener('dragenter', onDragEnter, false);
	obj.addEventListener('dragover', onDragOver, false);
	obj.addEventListener('dragleave', onDragLeave, false);
	obj.addEventListener('drop', onDrop, false);
	}

	codeView(document.getElementById("codearea"));