Первый раз, когда я перетаскиваю событие FileReader (), но не могу прочитать содержимое файла

Привет, мне нужна помощь в том, как я могу заставить перетаскивание читать текстовые файлы, которые помещаются в dropzone .. Я все еще изучаю javascript, и мне нужна помощь, чтобы понять, что не так с моим кодом ..

Содержимое текстового файла должно отображаться на Область отображения

Ссылка: http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

Заранее спасибо!

https://jsfiddle.net/d6nur0wc/1/

 (function() {
   var dropzone = document.getElementById("dropzone");

  dropzone.ondrop = function(event) {
    event.preventDefault();
    this.className = "dropzone";

    console.info(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;
  };

  }())