Nativescript ProgressBar is not getting updated while uploading image to firebase(only updating after 100%)

Question

Progressbar is getting updated only after status.percentageCompleted is equal to 100. How can I update it concurrently with progress? Thank you

This is my HTML file

    <Progress [value]="percent" [maxValue]="100">
    </Progress>
    <Button class="uploadButton" text="Upload" (tap)="uploadFile()"></Button>

This is my .ts file

@Component({

selector: "progressbar-page",
templateUrl: "progressbar-page.html",
styleUrls : ["./progressbar-page.css"]

})

export class progressbarpage{

message='';
path="";
Completion="";
percent;
constructor(private zone:NgZone){}

public ngOnInit() :void {
    this.path= knownFolders.currentApp().path+"/images/crime.jpg";
 }

uploadFile() {

    var metadata = {
        contentType: "Image",
        contentLanguage: "fr",
        customMetadata: {
          "foo": "bar",
           "foo2": "bar2"
        }
      };

    const appPath = knownFolders.currentApp().path;
    const logoPath = appPath+"//images//test.jpg"

    storage.uploadFile({
        bucket:  "gs://hri7238.appspot.com",
        remoteFullPath: 'uploads/images/firebase-storage.png',
        localFile: File.fromPath(logoPath),
        localFullPath: logoPath,
        onProgress: status => {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            if(status.percentageCompleted.valueOf()==100){
               alert("Upload Completed Succesfully");
            }
            this.percent=status.percentageCompleted.valueOf();
            console.log("Percentage complete: " + status.percentageCompleted);
        },metadata
    }).then(uploadedFile => {
        console.log("File uploaded: " + JSON.stringify(uploadedFile));
        this.message = "File uploaded: " + JSON.stringify(uploadedFile);
    }).catch(err => {
        alert("There was a problem uploading")
        console.log(err);
    })
}

}

Answer 1

When dealing with any kind of 3rd party library which is not tied to Angular's run context, sometimes elements are not properly updated. In this case you can update by Angular's provided zone api.

I see that you already injected NgZone as dependency on your constructor, so try to edit your on progress handler into this:

onProgress: status => {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            if(status.percentageCompleted.valueOf()==100){
               alert("Upload Completed Succesfully");
            }

            this.zone.run(() => {
               this.percent=status.percentageCompleted.valueOf();
            });
            
            console.log("Percentage complete: " + status.percentageCompleted);
        }

This makes sure the update of the "percent" class property is reflected in Angular's running context.