error on event.total object possibly is undefined when Upload file?

I work on Angular 7 I face issue event.total give me error as below :

(property) HttpProgressEvent.total?: number | undefined

Total number of bytes to upload or download. Depending on the request or response, this may not be

computable and thus may not be present.

Object is possibly 'undefined'.ts(2532)

I done This Component for upload files .

so How to solve this issue

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { HttpClient, HttpEventType,HttpProgressEvent } from '@angular/common/http';
@Component({
selector: 'app-delivery-files',
templateUrl: './delivery-files.component.html',
styleUrls: ['./delivery-files.component.css']
})
export class DeliveryFilesComponent implements OnInit {
@Output() public onUploadFinished = new EventEmitter();
constructor(private http: HttpClient,public progress: number,public message: string) { }
ngOnInit() {
}
public uploadFile = (files:any) => {
if (files.length === 0) {
return;
}
let fileToUpload = 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(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);
}
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.