angular2 filereader mysteriously fails - html

Question

I'm using the setup shown below to read image file in angular2. I'm using input element to show the window to choose file and then trigger the addThumbnail function when the file is chosen. The click on the input is being triggered by another button. I noticed that the trigger of addThumbnail function sometimes fails silently i.e. the function is not even triggered after choosing a file. This happens may be 1 out of 5 times I'm not sure if this could happen because of the size of the file. I tried to debug this by setting a breakpoint inside addThumbnail function but that is not even being triggered.
<div class="extra-image-container">
<input type="file" accept="image/*" (change)="addThumbnail($event)" style="display:none;" #fileInput2/>
<div class="thumbnail-button" (click)="fileInput2.click()">
<span><i class="material-icons">photo_camera</i></span><br>
<span>Extra Images</span>
</div>
</div>
This is the addThumbnail function and the file reader function I'm using.
addThumbnail(event) {
console.log('adding thumbnail');
var subscription = this.readImage(event.target).subscribe((result) => {
this.thumbnails.push(result.imageUrl);
this.editedThumbnails.push(result.imageUrl);
subscription.unsubscribe()
});
}
readImage(inputValue: any) : Observable<any> {
var file:File = inputValue.files[0];
var myReader:FileReader = new FileReader();
var observable = new Observable(observer => {
myReader.onloadend = (e) => {
observer.next({imageUrl: myReader.result});
console.log("image loaded");
// var image = new Image();
// image.addEventListener("load", () => {
// observer.next({
// imageWidth: image.width,
// imageHeight: image.height,
// imageSize: file.size/1000,
// imageUrl: myReader.result
// })
// console.log("image loaded");
// })
// image.src = myReader.result;
}
myReader.readAsDataURL(file);//triggers the callback
})
return observable
}

Answer 1

It turns out that if you read same file one after another, then the change is not triggered because the files are same. So, to fix this all I had to do was set the value of input element to empty string after a file is loaded.
#ViewChild('fileInput2') private thumbImageInput: ElementRef;
// and in the addThumbnail method:
addThumbnail(event) {
var subscription = this.readImage2(event.target).subscribe((result) => {
this.thumbnails.push(result.imageUrl);
this.editedThumbnails.push(result.imageUrl);
window.URL.revokeObjectURL(result.imageUrl);
this.thumbImageInput.nativeElement.value = '';
});
}