Using FormData with http methods

Hi! Is it possible to send formData with put, post, etc methods? When I have something like:

@Component({})
export class Foo {
  public myForm: FormGroup;

  constructor(private angular2TokenService: Angular2TokenService) {}

  bar() {
    let someFormData = new FormData();
      Object.keys(this.myForm.value).forEach(k => {
      someFormData.append(k, this.myForm.value[k]);
    });
    this.angular2TokenService.put('url', someFormData).subscribe(res => {
      console.log(res);
    });
  }
}

I haven’t someFormData in my request. I finded workaround for myself by using: http.put with all needed headers instead: tokenService.put

I do something like:

@Component({})
export class Foo {
  public myForm: FormGroup;

  constructor(private http: Http) {
    this.headers = new Headers({
      'accessToken': localStorage.getItem('accessToken'),
      'client':       localStorage.getItem('client'),
      'expiry':       localStorage.getItem('expiry'),
      'tokenType':   localStorage.getItem('tokenType'),
      'uid':          localStorage.getItem('uid')
    });
  }

  bar() {
    let someFormData = new FormData();
      Object.keys(this.myForm.value).forEach(k => {
      someFormData.append(k, this.myForm.value[k]);
    });
    this.http.put('url', someFormData, {headers: this.headers}).subscribe(res => {
      console.log(res);
    });
  }
}

My angular2-token version is v0.1.17.

[arjenbrandenburgh]

@NiekPas, he means using version 6.0.0-rc.0 of angular-token

https://github.com/neroniaky/angular2-token/tree/6.x https://www.npmjs.com/package/angular-token

We’re slowly migrating away from the current implementation and moving to a HttpInterceptor solution since that plays a lot nicer with HttpClient.

[Senegal]

@artem-galas, you can use “request” method and append auth headers with {enctype: “multipart/form-data”}

example from my user-service class

export class UserService extends Angular2TokenService {
 ......
  updateMediaImage(model, id, value){
    let fd:FormData = new FormData();
    fd.append('media', value, 'image.png');
    let hdrs = this.currentAuthHeaders;
    hdrs.append('enctype',"multipart/form-data")
    let requestOptions = new RequestOptions({
      method: RequestMethod.Put,
      headers: hdrs,
      url: environment.apiEndpoint+'/media/'+model+'/'+id,
      body: fd
    });
    return this.request(requestOptions).toPromise().then(
        (response) => response.json()
    );
  }
.......
}