Angular2 input file onChange Event not working in Firefox

Question

In Chrome and Internet Explorer my input file upload works fine, but I get an error when using in Firefox.

Extract from HTML Template

<input multiple style="display: none" type="file" (change)="onChange($event)" accept="image/*"/>

Extract from Component Class

  onChange(event: any) {

    let files = event.srcElement.files;
    ....
  }

The error message is just: TypeError: event.srcElement is undefined

Is this a bug of Firefox? What is the meaning of the dollar sign?

Answer 1

You should be using event.target(being used by other browser) because srcElement is only being used by IE. Thereafter you could event.srcElement as an fallback(for Internet Explorer case)

var target = event.target || event.srcElement; //if target isn't there then take srcElement
let files = target.files;