title: First time making my drag and drop FileReader() event but can't read the content of the file
body: <p>Hi I need help on how I can make my drag and drop read the .text files that is dropped in the dropzone.. I'm still exploring javascript and would need help to guide me on what is wrong with my code.. </p>
  
  <p>The content of the text file should be shown on the <strong>displayarea</strong> </p>
  
  <p>Reference: <a href="http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api" rel="nofollow noreferrer">http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api</a></p>
  
  <p>Thanks in advance!</p>
  
  <p><a href="https://jsfiddle.net/d6nur0wc/1/" rel="nofollow noreferrer">https://jsfiddle.net/d6nur0wc/1/</a></p>
  
  <pre><code> (function() {
     var dropzone = document.getElementById("dropzone");
  
    dropzone.ondrop = function(event) {
      event.preventDefault();
      this.className = "dropzone";
  
      console.log(event.dataTransfer.files[0]);
  
      window.onload = function() {
        var fileInput = document.getElementById('dropzone');
        var fileDisplayArea = document.getElementById('displayarea');
  
        fileInput.addEventListener('dropzone.ondrop', function(read) {
          var file = fileInput.files[0];
          var textType = /text.*/;
  
          if (file.type.match(textType)) {
            var reader = new FileReader();
  
            reader.onload = function(read) {
              fileDisplayArea.innerText = reader.result;
            }
  
            reader.readAsText(file);
            }
  
            else {
              fileDisplayArea.innerText = "File not supported!";
            }
        });
    }
    }
  
    dropzone.ondragover = function() {
      this.className = "dropzone dragover";
      return false;
    };
  
    dropzone.ondragleave = function() {
      this.className = "dropzone";
      return false;
    };
  
    }())
  </code></pre>