Reading File from input tag in AngularDart

Question

I'm working on learning AngularDart and am currently trying to read a file using a file upload button with the following code in my template.

<input type="file" (change)="onFileChanged($event)">

and my event handler is currently in this form, but nothing seems to work. Using console debug I know that it is of type File, but using any methods such as open and readAsString fail. To String works, but onyl gives the type of the object in this case, [object File]

import 'dart:io';
import 'dart:html';

import 'package:angular/angular.dart';

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
)

class AppComponent {
  String contents;

  onFileChanged(event) {
    contents = event.target.files[0].open(Mode: FileMode.read);
    window.console.debug(contents);
  }
}

Thanks to the help from the post with the similar question as mine, I got it to work. I still utilized my event handler and made sure that I DID NOT import both dart:io and dart:html, only dart:html is needed.

This is what my final event handler looked like.

import 'dart:html';

import 'package:angular/angular.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
)

class AppComponent {
  String contents;

  AppComponent();

  void fileUpload(event) {
    InputElement input = window.document.getElementById("fileUpload");
    File file = input.files[0];
    FileReader reader = FileReader();
    reader.readAsText(file);
    reader.onLoad.listen((fileEvent) {
      contents = reader.result;
    });
  }
}

This is what my template looks like:

<h1>File upload test</h1>
<input type="file" (change)="fileUpload($event)" id="fileUpload">
<div *ngIf="contents != null">
    <p>Hi! These are the contents of your file:</p>
    <p>{{contents}}</p>
</div>