Angular 2 Http Post with Promise failing, not sending data

Question

I am attempting to make a http.post call with angular 2. I have tested the call in postman, so I know that the api is working. I get an error, input empty which means that it isn't getting the data. I've read a few answers and articles, but not able to make a successful call with the data.

Can anyone give me some insight into what I am missing?

public upload(name: string, data: any, result, contentType: string) : Promise<Response> {

        let headers = new Headers({ 'Content-Type': contentType });

        let options = new RequestOptions({ headers: headers });

        return this.http
            .post(this.urlAPI, data, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    extractData(res:Response) {
        console.log('res: ', res);
        let body = res.json();
        return Promise.resolve(res);
    }


    handleError(err: any): Promise<any> {
        console.error('An Error has occured: ', err);
        return Promise.reject(err);
    }

Answer 1

I am not sure what is the type of your 'data'. Data has to be stringified before sent. Below is a workable version for me.

saveNote(note: ApprovalNoteModel): Observable<ApprovalNoteModel> {
    let body = JSON.stringify(note);
    let headers = this.utilsSvc.getAuthHeaders();
    headers.set('Content-Type', 'application/json');

    return this.http.post('cloud/api/approval/note', body,
        { headers: headers }
    ).map(response => response.json());
}

If it is a file, then you can not do that thru 'http', I believe. Here is my workable version.

addFileRequest(referenceId: number, licenseId: number, url: string, files: File[]): Observable<any> {
    return Observable.create(observer => {
        this.progressObserver = observer;
        let formData: FormData = new FormData(),
            xhr: XMLHttpRequest = new XMLHttpRequest();

        formData.append('referenceId', referenceId);
        formData.append('licenseId', licenseId);
        for (let i = 0; i < files.length; i++) {
            formData.append("uploads[]", files[i], files[i].name);
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(xhr.response);
                    observer.complete();
                } else {
                    if (xhr.response.status)
                        observer.error(xhr.response);
                    else
                        observer.error({ 'status': xhr.status, '_body': xhr.response });
                }
            }
        };

        xhr.upload.onprogress = (event) => {
            this.progress = Math.round(event.loaded / event.total * 100);
            this.progressObserver.next(this.progress);
        };

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Authorization', this.utilsSvc.getToken());
        xhr.send(formData);
    });
}