HTML5 Drag and Drop: Load text file in a textbox with JavaScript

Question

I want to allow users to drag and drop (or select) a file from their computer and load it into a textbox with JavaScript.

Is it possible to load a local file with JavaScript into a textbox? If yes, then how?

Answer 1

I think everything you would want for HTML5 is included in remy/html5demos on github.

As an example, I modified http://html5demos.com/file-api to accept text files and display them in the browser.

See the jsfiddle.

Edit
Relevant script:

// modified from http://html5demos.com/file-api
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
    state.className = 'fail';
} else {
    state.className = 'success';
    state.innerHTML = 'File API & FileReader available';
}

holder.ondragover = function() {
    this.className = 'hover';
    return false;
};
holder.ondragend = function() {
    this.className = '';
    return false;
};
holder.ondrop = function(e) {
    this.className = '';
    e.preventDefault();

    var file = e.dataTransfer.files[0],
        reader = new FileReader();
    reader.onload = function(event) {
        console.log(event.target);
        holder.innerText = event.target.result;
    };
    console.log(file);
    reader.readAsText(file);

    return false;
};​