Cannot properly set RequestOptionsArgs of POST, in service

Question

I use angular 6 and I was following along this video tutorial to submit images.

I would like to observe the progress of the form submission, so I can get the percentage of the uploaded file.

I have this in my component

import { HttpClient,HttpEventType } from '@angular/common/http';
import { Http, Headers } from '@angular/http';

  constructor(
    private formBuilder: FormBuilder, 
    private myService:MyService,
    private changeDetector: ChangeDetectorRef,
    private carouselConfig : NgbCarouselConfig    ,
    private http:HttpClient
   ) { }

    let headers = new Headers();    
    headers.append('Authorization',this.token);    
    let eb =null;
    this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
      event=>{        
        if(event.type === HttpEventType.UploadProgress){
          let pv = Math.round(event.loaded / event.total *100);
          this.imguploadprogress.nativeElement.value =  pv;          
        }
        else if(event.type === HttpEventType.Response){     
          eb = event.body;              
          if(eb.success){                  
            this.imguploadprogress.nativeElement.value =  100;                                   
            this.imageMsg='All good';                                       
          }
          else{
            this.imguploadprogress.nativeElement.value =  0;
            this.imageMsg='nope;        
          }
        }        
    }); 

This works fine.

I try to "split" this now in two parts. Turn the post and its headers and its parameters to a function in my service, and just subscribe and get the results in the component. I try to do this:

myapp.component.ts

this.myService.uploadImage(form).subscribe(
  e=>{
    console.log('e- ',e);
  }
);

and in my service myapp.service.ts

  uploadImage(data) {
    let formData = new FormData(data);
    let headers = new Headers();    
    headers.append('Authorization',this.token);
    return this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true, observe:'events', headers:headers});
  }

VScode says Argument of type {reportProgress:boolean;observe:string;headers:Headers} is not assingable to parameter of type RequestOptionsArgs

During compile I get Object literal may only specify known properties, and 'reportProgress' does not exist in type 'RequestOptionsArgs'. and when I try to use the form I get just the final response object back, with no event info in between.

So, how can I properly set my RequestOptionsArgs ?

Thanks

Answer 1

I think you are mixing APIs, reportProgress is a property of HttpRequest<T> which lives in @angular/common/http.

In your example, it seems you are basing your service in the Angular 6 Http injectable service from the HttpModule in @angular/http.

• Instead, use the request method from HttpClient that comes in @angular/common/http.

• Also, make sure you use HttpHeaders from @angular/common/http as well.

The following will work:

uploadImage(data) {
  let formData = new FormData(data);
  let headers = new HttpHeaders().append('Authorization', this.token);
  return this.httpClient.post(
    'http://localhost:3000/cms/upload',
    formData,
    {
      reportProgress: true,
      observe: 'events',
      headers: headers
    });
}

Of course you will have to import:

import { HttpClient, HttpHeaders } from '@angular/common/http';

And inject the HttpClient in your service constructor:

constructor(private httpClient: HttpClient) { ... }

I hope this explains and resolves your issue!

Answer 2

Your third argument to http.post is the httpOptions, yours looks like

{reportProgress:true, observe:'events', headers:headers}

According to the good ol' https://angular.io/guide/http

it is shown an example where they use:

{ observe: 'response' }