title: Drag n' drop text file
body: <p>I want dropped text files to be shown by their contents or their complete location so that I can load contents of that location into the "drop_zone".</p>
  
  <p>This is what I have till now. I was just able to access the file name: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;textarea id="drop_zone"&gt;Drop files here&lt;/textarea&gt;
  &lt;output id="list"&gt;&lt;/output&gt;
  
  &lt;script&gt;
    function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();
  
      var files = evt.dataTransfer.files; // FileList object.
      document.getElementById('drop_zone').innerHTML = files[0].name;
    }
  
    function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }
  
    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>