get the value from a FileReader in Angular 2

Question

I have the following component that load a file and bind his content as string

    export class NgCsvComponent {

        @Input() csv: any;

        @Output() csvChange: any = new EventEmitter();

        public localCsv : any = '';

      constructor() { }

      changeListener($event): void {
        this.readFile($event.target);
      }

      readFile (inputValue : any) : void {
        let reader = new FileReader (),
              file : File = inputValue.files[0];
          reader.readAsText(file);    
        reader.onload = this.onLoadCallback;
      }

        onLoadCallback (event) {
            this.csvChange.emit(event.target["result"]);
        }
    }

the problem is that this.csvChange is undefined inside onLoadCallback so how I could pass the result to some variable in my component?

I was search other similar question but never get the result outside of onloadCallback function

Poul Kruijt · Accepted Answer · 2019-11-11 10:06:29Z

11

The problem is that the context is lost when you do:

reader.onload = this.onLoadCallback;

One solution is:

reader.onload = (e: Event) => {
    this.onLoadCallback(e);
}

Another one is:

reader.onload = this.onLoadCallback.bind(this);

Yet another one is:

onLoadCallback = (event) => {
    this.csvChange.emit((event.target as FileReader).result);
}

Bottom line. Make sure that the this context always remains inside your class.

edited Nov 11, 2019 at 10:06

answered Oct 11, 2016 at 15:09

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nathan Beck Over a year ago

Excellent implementation - particularly like the second solution. Thanks

Akhil Over a year ago

I was trying to use event.target.result and always showed error until i changed it to event.target["result"]. Thank you!

Poul Kruijt Over a year ago

@Akhil That's because event.target is typed as a EventTarget and this does not have the property result. You should cast it to FileReader first like: (event.target as FileReader).result

Collectives™ on Stack Overflow

get the value from a FileReader in Angular 2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related