Attempting to upload a photo with Angular2 to my REST Service (Loopback). The Loopback service has been successfully tested using Postman and is able to accept files with the x-www-form-urlencoded header.
Below is a simplified version of the service method used to send the POST request:
public uploadFile(url: string, file: File): Observable<any> {
let headers: Headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let formData = new FormData();
formData.append('file', file);
let options: RequestOptionsArgs = { headers: headers };
return this.http.post(url, formData, options)
.map((res: any) => (res.text() != "" ? res.json() : {}));
}
It's worth noting that the header has been set to application/x-www-form-urlencoded and the formData containing the file is being sent in the body.
Everything seems fine in Angular up until the http.post request, as the formData is populated with the file and its content is present:
However, during the request, the body appears to be an empty object {}:
It seems like Angular may be attempting to JSON.stringify(formData), which results in an empty object. I have observed many posts using the same method (http.post(url, formData)), so what could potentially be missing here?