Template.uploadButton.rendered = function () {
  Session.setDefault("displayUploadPatternForm", false);
  var fileSelect = document.getElementById("fileSelect");
  var fileElem = document.getElementById("fileElem");
  //var thumbnailPreviewArea = document.getElementById("thumbnailPreviewArea");
};

Template.uploadButton.events({
  'click #fileSelect': function (event) {
    console.log("clicked link");
    if (fileElem) {
      console.log("trying to click fileUploader");
      fileElem.click();
      event.preventDefault(); // prevent navigation to "#"
    }
  },
  'change #fileElem' : function (event) {
    var file = event.target.files[0];
    console.log(file);
    if (file.type.match("image/bmp")) {
      var imageThumbnail = document.createElement("img");
      imageThumbnail.classList.add("obj");
      imageThumbnail.file = file;
       // Assuming that "preview" is a the div output where the content will be displayed.
      var reader = new FileReader();
      //make more sense of this onload function.
      reader.onload = (function(aImg) {
        return function(e) {
          uploadPatternFormDisplayed = Session.get("displayUploadPatternForm");
          Session.set("displayUploadPatternForm", !uploadPatternFormDisplayed); //*******************RENDERS Template.thumbnailPreviewArea. Does function below this render before Template.thumbnailPreviewArea.rendered or the other way around?
          aImg.src = e.target.result;
        };
      })(imageThumbnail);
      reader.readAsDataURL(file);
    }
    //need user prompt here
    else console.log("some kind of file matching error");
  }
});


Template.uploadPattern.helpers({
  "displayUploadPatternForm": function () {
    return Session.get("displayUploadPatternForm");
  }
});

Template.thumbnailPreviewArea.rendered = function () {
  var thumbnailPreviewArea = document.getElementById("thumbnailPreviewArea");
  var imageThumbnail = document.getElementsByClass("obj");
  console.log(imageThumbnail);
  thumbnailPreviewArea.appendChild(imageThumbnail);
};