Dragging a local file into textarea with Opera 12 - html

Question

I am creating an application using HTML5 where I would like to be able to drag a local text file into a textarea. This works fine in Firefox 20.0.1, Chrome 26.0.1410.64 m and Internet Explorer 10 but not in Opera 12.15 or Safari 5.1.7. Instead of the text of the file appearing within the text area a new page opens containing the text. I understand from this answer that I should expect problems from Safari however the implication is that it should work with Opera 12.
Any help explaining or overcoming the problem would be appreciated.
The application, which is nowhere near finished, is at grideasy.github.io with the source files at https://github.com/grideasy/grideasy.github.io
To see the effect click on the 'Content' button and drag a text file into the text area.
Both Safari and Opera pass the detect feature code below
if(window.File && window.FileReader && window.FileList && window.Blob) {
dropZone = $('drop_zone');
dropZone.value="";
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
dropZone.addEventListener('click', storeCursorPosition, false);
dropZone.addEventListener('keyup', storeCursorPosition, false);
}
else {
}
this is found in lines 30 to 41 of the event.js file
The following code from dropcontent.js reads the file and displays the text from the file.
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function handleBodyDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var f = files[0];
if (f)
{
var r = new FileReader();
r.onloadend = function(e) {extract(e.target.result) }
r.readAsText(f);
}
else
{
alert("Failed to load file");
}
}
function extract(a) {
$('drop_zone').value=a;
}
Thank you for any suggestions

Answer 1

It appears that Opera will not accept a textarea as an object that can be used as a dropzone. Changing the textarea to a paragraph, span or div will allow that area to accept a draged and dropped file.