Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
drag source files to browser to view as plain text
<!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,"&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"));
@sbussard

This comment has been minimized.

Copy link
Owner Author

@sbussard sbussard commented Jun 1, 2012

it seems to work better if on line 26 you replace file.slice with file.webkitSlice ... right now it only seems to work with Chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.