How to upload files in angular 2

file-upload.component.ts

/**
 * Created by Fabian on 19/10/2016.
 */
import { Component, ElementRef, Input } from '@angular/core';
import { Http } from '@angular/http';
@Component({
    selector: 'file-upload',
    template: '<input type="file" [attr.multiple]="multiple ? true : null" (change)="upload()" >'
})
export class FileUploadComponent {
    constructor(private http: Http,
                private el: ElementRef
    ) {}

    @Input() multiple: boolean = false;

    upload() {
        let inputEl = this.el.nativeElement.firstElementChild;
        if (inputEl.files.length == 0) return;

        let files :FileList = inputEl.files;
        const formData = new FormData();
        for(var i = 0; i < files.length; i++){
            formData.append(files[i].name, files[i]);
        }

        this.http
            .post('/api/test/fileupload', formData)
            .subscribe();

    }
}

Just in case anyone else ever comes across the error mentioned by @mulhaq1 it is caused by having the input nested inside of other divs. To solve, put the input inside of its own component and wrap the input in any divs in the template and it should work.

I have the same problem on primeng + ie9

fileupload.js line 89. files is undefined after choose one file

@mdmota IE9 doesn't support the File Api: https://caniuse.com/#feat=fileapi