in the previous version of angular the bellow code normally working for me, but now in angular 14 it gives me the error Object is possibly undefined

 this.progress = Math.round(100 * event.loaded / event.total);

the error is event.total section here is my complete code in typescript

import { HttpClient, HttpEventType, HttpErrorResponse } from '@angular/common/http';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  progress: number;
  message: string;
  @Output() public onUploadFinished = new EventEmitter();
  
  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  uploadFile = (files) => {
    if (files.length === 0) {
      return;
    }

    let fileToUpload = <File>files[0];
    const formData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);
    
    this.http.post('https://localhost:5001/api/upload', formData, {reportProgress: true, observe: 'events'})
      .subscribe({
        next: (event) => {
        if (event.type === HttpEventType.UploadProgress)
          this.progress = Math.round(100 * event.loaded / event.total);
        else if (event.type === HttpEventType.Response) {
          this.message = 'Upload success.';
          this.onUploadFinished.emit(event.body);
        }
      },
      error: (err: HttpErrorResponse) => console.log(err)
    });
  }
}

can anyone help me with how to solve this error???? thanks

CodePudding user response：

The value is returning from Http request, so it really can be undefined, and in case it will return undefined the value that will return to the progress variable will NaN. so, you can simply wrap it with condition:

if(event?.loaded && event?.total ) {
   this.progress = Math.round(100 * event.loaded / event.total)
 }

or, give it a default value:

 this.progress = Math.round(100 * (event.loaded || 1) / (event.total || 1))