rclark/index.html

## index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body, #drop {
            height: 100%;
            width: 100%;
        }
        #drop {
            text-align: center;
            border-width: 15px;
            border-style: solid;
            box-sizing: border-box;
            display: table;
        }
        #drop > h1 {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <body>
        <div id="drop" style="border-color:#add8e6;">
            <h1>Please drop a file here</h1>
        </div>
    </body>
    <script src="index.js"></script>
</html>

## index.js
if (window.FileReader) {
    function fileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        dropzone.style.borderColor = "#20be20";
        return false;
    }

    function fileDragLeave(e) {
        e.stopPropagation();
        e.preventDefault();
        dropzone.style.borderColor = "#add8e6";
        return false;
    }

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

        var files = e.target.files || e.dataTransfer.files,
            reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target.result);
        };

        reader.onerror = function (e) {
            console.log(e.target.error.code);
        };

        reader.readAsText(files[0]);
    }

    var dropzone = document.getElementById('drop');
    dropzone.addEventListener('dragover', fileDragHover, false);
    dropzone.addEventListener('dragleave', fileDragLeave, false);
    dropzone.addEventListener('drop', fileDrop, false);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	html, body, #drop {
	height: 100%;
	width: 100%;
	}
	#drop {
	text-align: center;
	border-width: 15px;
	border-style: solid;
	box-sizing: border-box;
	display: table;
	}
	#drop > h1 {
	display: table-cell;
	vertical-align: middle;
	}
	</style>
	<body>
	<div id="drop" style="border-color:#add8e6;">
	<h1>Please drop a file here</h1>
	</div>
	</body>
	<script src="index.js"></script>
	</html>
	if (window.FileReader) {
	function fileDragHover(e) {
	e.stopPropagation();
	e.preventDefault();
	dropzone.style.borderColor = "#20be20";
	return false;
	}

	function fileDragLeave(e) {
	e.stopPropagation();
	e.preventDefault();
	dropzone.style.borderColor = "#add8e6";
	return false;
	}

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

	var files = e.target.files \|\| e.dataTransfer.files,
	reader = new FileReader();

	reader.onload = function (e) {
	console.log(e.target.result);
	};

	reader.onerror = function (e) {
	console.log(e.target.error.code);
	};

	reader.readAsText(files[0]);
	}

	var dropzone = document.getElementById('drop');
	dropzone.addEventListener('dragover', fileDragHover, false);
	dropzone.addEventListener('dragleave', fileDragLeave, false);
	dropzone.addEventListener('drop', fileDrop, false);
	}