angularangular7filereaderonloadreadystate

FileReader.readystate stuck at 1. Onload is not fired

I am quite newbie in angular7 and I just trying to get data from an input type file in the html file. I am not getting it. I got the name and different specifications of the file, but not the proper data of it.

The point is readystate doesnt change to 2, so result property never is fill it and I cant get the data so.

As far as I got it:

TS

onChange(event) {
  if (event.target.files && event.target.files.length > 0) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = this.saveImage(reader, event);
  }
}

private saveImage (reader: FileReader, ev: ProgressEvent): any {
  this.userInfo.Imagen = (reader.result as string).split(',')[1];
  this.converted_image = this.domSanitizer.bypassSecurityTrustResourceUrl(this.base64 + this.userInfo.Imagen);
  return null;
}

HTML

<input id="file-input" type="file" capture style="display:none" #fileInput (change)="onChange($event)"/>

But I dont recover any data at all.

Thanks mates.

Solution

  • Finally... Quite odd and hoping this answer help you all or, at least, give you a clue about this situation.

    Chrome version, from 73 to 75 (fixed in it) has a problem when an event collides with a debugger command or break point by IDE (debugger command in fact).

    The solution is just eliminate any debugger command in the cycle of raising and launching the event and its event method.