CODEWITHSUNDEEP
angularxmlhttprequest
tiana
tiana

Reputation: 414

Type 'Observable<void>' is not assignable to type 'Observable<HttpEvent<any>>' Type 'void' is not assignable to type 'HttpEvent<any>'

I am trying to add progress bar for upload and getting this error. and also event.type is undefined.

please help me find solution. Thank you

i have attached code that i have done.

HttpRequest code

uploadfile(file: any): Observable<HttpEvent<any>>{
  return this.InfoService.getId().pipe(
      concatMap((result) => {
          return this.schemaService.getSchema().pipe(schema => {
              const url = '/url';
              return this.http.post(url, file, {headers: this.headers, reportProgress: true});
      }).toPromise().then((resolved) => {
          this.successMessage('Upload Success',MessageIcon, " uploaded successfully");
      })
  }));
}

Subscribe Method:


uploadfile(){
  const formData = new FormData();
  formData.append('file', this.uploadForm.get('item').value);
  this.uploadService.uploadfile(formData).subscribe((event : HttpEvent<any>) => {
    console.log(event)
    switch (event.type) {
      case HttpEventType.UploadProgress:
        this.progress = Math.round(event.loaded / event.total * 100);
        console.log(`Uploaded! ${this.progress}%`);
        break;
      case HttpEventType.Response:
        console.log('successfull!', event.body);
        setTimeout(() => {
          this.progress = 0;
        }, 1500);

    }
  })  
}

Upvotes: 0

Views: 222

Answers (1)

Barremian
Barremian

Reputation: 31125

  1. I'm not sure what you're trying to do with schema argument to the pipe function. pipe takes RxJS operators as arguments. And judging by the usage, I assume you'd want to use a mapping operator like concatMap here.

  2. The return type of the function is declared as Observable<HttpEvent<any>>. But you're converting the Observable to a Promise using toPromise() function. You could use the tap operator instead.

Try the following

uploadfile(file: any): Observable<HttpEvent<any>> {
  return this.InfoService.getId().pipe(
    concatMap((result) => this.schemaService.getSchema()),
    concatMap((schema) => {
      const url = '/url';
      return this.http.post(url, file, {
        headers: this.headers,
        reportProgress: true,
        observe: "events"              // <-- also try adding `observe`
      });
    }),
    tap(() => this.successMessage('Upload Success', MessageIcon, " uploaded successfully"))
  );
}

Upvotes: 1

Related Questions