How to bind FileList to Observable in Dart Polymer? - dart

Question

I'm trying to use a file upload in combination with Dart & Polymer. Consider the following files:
my-upload.html
<polymer-element name="my-upload">
<template>
<style></style>
<input type="file" id="uploader" bind-files="{{files}}" on-change="{{uploadFiles}}" multiple>
</template>
<script type="application/dart" src="my-upload.dart"></script>
</polymer-element>
my-upload.dart
#CustomTag('my-upload')
class MyUpload extends PolymerElement {
#observable FileList files;
MyUpload.created() : super.created();
void uploadFiles(event, details, target) {
print(files);
}
}
The print-statement in uploadFiles always prints null. It seems, that the fileList wasn't bound to the observable. Is there a way to solve this issue? Do I have to use another statement than bind-files?
Of course, there is a workaround, but it misses the point, I think:
my-upload.dart
#CustomTag('my-upload')
class MyUpload extends PolymerElement {
FileUploadInputElement uploader;
MyUpload.created() : super.created() {
uploader = $['uploader'];
}
void uploadFiles(event, details, target) {
print(uploader.files);
}
}
Any ideas?

Answer 1

FileList is not observable.
With the #observable annotation you can only observe if files is changed so that it points to a different FileList but not to changes inside the FileList.
I can't see a compelling reason in your example why you would need an observable FileList.
Do you want to do more with it than what we can see from the example?
You could simplify your code. I don't know if this makes sense in your use case:
#CustomTag('my-upload')
class MyUpload extends PolymerElement {
void uploadFiles(event, details, target) {
FileUploadInputElement uploader = $['uploader'];
print(uploader.files);
}
}
or even shorter
#CustomTag('my-upload')
class MyUpload extends PolymerElement {
void uploadFiles(event, details, target) {
print($['uploader'].files);
}
}