Uploading Excel files (CSV) -angular 2

here is a component you can reuse.

http://valor-software.com/ng2-file-upload/

You can install with

npm install ng2-file-upload --save

There is a backend example in express on the page.

HTML CODE:
-------------------------------------------------------------------------------
<div class="form-group">
<label for="fileChooseAFile">Choose a File</label>
<input id="fileChooseAFile" #data type="file" class="form-control" (change)="getFiles(data)" name="fileChooseAFile" accept=".csv">
</div>

<div class="col-md-12">
<div class="btn-bar">
<a href="#" class="btn btn-link">Cancel</a>
<a (click)="postfile();" class="btn btn-secondary">Upload</a>
</div>
</div>

-----------------------------------------------------------------------------
Component Code
-----------------------------------------------------------------------------
getFiles(files: any) {
        let taskExcelFiles: FileList = files.files;
        this.file = taskExcelFiles[0];
    }

postfile() {
        if (this.file !== undefined) {
       this._uploadService.postFormData(this.file)
            .map(response => {
                this.alertClosed = false;
            }).catch(error => this.errorMessage = <any>error);
            setTimeout(() => {
                this.alertClosed = true;
            }, 5000);
        } else {
            //show error
        }
    }

-----------------------------------------------------------------------
Service Code
-----------------------------------------------------------------------
postFormData(file: File) {
        return Observable.fromPromise(new Promise((resolve, reject) => {
            let formData: any = new FormData()
            let xhr = new XMLHttpRequest()

            formData.append("file", file, file.name);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(xhr.response)
                    } else {
                        reject(xhr.response)
                    }
                }
            }
            xhr.open("POST", environment.baseUrl + '/uploadExcel', true);
            xhr.send(formData)
        }));
    }

Angular 2+ provides good support for uploading file. No need for any third party library.

Here is my solution :

It is very important to leave the Content-Type empty. If you set the 'Content-Type' to 'multipart/form-data' the upload will not work !

upload.component.html

<input type="file" (change)="fileChange($event)" name="file" />

upload.component.ts

export class UploadComponent implements OnInit { constructor(public http: Http) {}

fileChange(event): void {
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file = fileList[0];

        const formData = new FormData();
        formData.append('file', file, file.name);

        const headers = new Headers();
        // It is very important le leave the Content-Type empty, if you set it to 'multipart/form-data' it will not work !
       // do not set headers.append('Content-Type', 'multipart/form-data');
        headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9');
        const options = new RequestOptions({headers: headers});

        this.http.post('https://api.mysite.com/uploadfile', formData, options)
             .map(res => res.json())
             .catch(error => Observable.throw(error))
             .subscribe(
                 data => console.log('success'),
                 error => console.log(error)
             );
    }
}

}