FileAPI

by zerippe

HTML

<div id="drop">Drop here !</div>
<input id="file" name="file" type="file"/>
<div id="result"></div>

CSS

#drop{
    padding: 20px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #bbb;
    text-align: center;
}

JavaScript

var textReader = function(file) {
    var r = new FileReader();
    r.readAsText(file);
    r.onload = function(e) {
        var text = e.target.result;
        document.getElementById("result").innerText = text;
    };
};

var f = document.getElementById("file");
f.addEventListener("change", function(e) {
    textReader(e.target.files[0]);
});

var d = document.getElementById("drop");
d.addEventListener("dragover", function(e) { e.preventDefault(); });
d.addEventListener("drop", function(e) {
    textReader(e.dataTransfer.files[0]);
    e.preventDefault();
});