title: Detecting local file drag'n'drop with HTML/JavaScript
body: <p>There is a HTML textarea. I'm able to catch that event when a <em>local file</em> is dragged and dropped onto the textarea. But <strong>how to obtain the name of the dropped file?</strong> (To be modified and inserted into the textarea finally.)</p>
  
  <p>The following expressions returns None in that case:</p>
  
  <pre><code>event.dataTransfer.files
  event.dataTransfer.getData('text/plain')
  </code></pre>
  
  <p>I made a short example for <strong>Firefox 3</strong> that is my target platform currently.</p>
  
  <pre><code>&lt;script&gt;
  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 + ' &amp;&amp; data: ' + data + '.')
  }
  &lt;/script&gt;
  
  &lt;body onload='init()'&gt;
  &lt;textarea cols=70 rows=20 id='x'&gt;&lt;/textarea&gt;
  </code></pre>