I have created the following service for uploading files to a server in Angular2:
import { Component } from '@angular/core';
import { Http, Response, Headers, RequestOptionsArgs } from '@angular/http'
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
@Injectable()
export class UploadService {
constructor(private http: Http) {
}
public upload(url: string, file: File, type: string): Observable<Response>{
let formData: FormData = new FormData()
formData.append("uploadFile", file);
let headers = new Headers();
headers.append('Content-Type', type);
let opts:RequestOptionsArgs = { headers: headers };
return this.http.put(url, formData, opts)
}
}
It works fine for most data types, except I am having a bizarre problem where for images it adds the following header into the top of the file:
------WebKitFormBoundaryUmPd3GQyQ1XQfCFv Content-Disposition: form-data; name="uploadFile"; filename="Picture_Lotus-01.jpg" Content-Type: image/jpeg
Other than that all the data has been uploaded correctly; i.e if i then download the file and remove those header lines the image is readable. I have tested the upload with Postman and it works fine, therefore I believe it is the way that I'm configuring the header information in my angular2 upload. Help!! I have been banging my head against this for a whole day now!
