Detecting local file drag'n'drop with HTML/JavaScript

drag-and-drop, firefox, html, javascript

Solution

This is a bit late - but I think what you are looking for is this:

event.dataTransfer.files[0].name

You can also get the following properties:

event.dataTransfer.files[0].size
event.dataTransfer.files[0].type

And you can loop thru these files with the following:

var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}

Btw - if you are using jQuery then the dataTransfer object can be found here:

event.originalEvent.dataTransfer.files[0].name

Problem

There is a HTML textarea. I'm able to catch that event when a local file is dragged and dropped onto the textarea. But how to obtain the name of the dropped file? (To be modified and inserted into the textarea finally.) The following expressions returns None in that case: ``` event.dataTransfer.files event.dataTransfer.getData('text/plain') ``` I made a short example for Firefox 3 that is my target platform currently. ``` <script> function init() { document.getElementById('x').addEventListener('drop', onDrop, true) } function onDrop(event) { var data = event.dataTransfer.getData('text/plain') event.preventDefault() alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.') } </script> <body onload='init()'> <textarea cols=70 rows=20 id='x'></textarea> ```

Original source