file upload progress is not synchronizing properly on the view(html) #691

New Issue

2017-03-21T14:20:09Z

shakthi23 commented

2017-03-21 14:20:09 +00:00

(Migrated from github.com)

<div class="progress" *ngIf="isuploadingProgress">
            <p style="padding: 0; margin: 0" *ngIf="uploadCopy.isUploading">Uploading {{uploadCopy.queue.length}} files</p>
            <div class="progress-bar">
                <p class="progress-content" role="progressbar" [ngStyle]="{ 'width': uploadStatusProgress + '%' }"></p></div>
                <button class="cancelUploadBtn" (click)="cancelUpload()">Cancel</button>
        </div>

in .ts

if(this.uploadStatusOlddata !== this.uploadStatusProgress){
      this.uploadCopy.onProgressAll = (data:any) => {
        this.uploadStatusProgress = data;
        console.log("this.uploadStatusProgress ", this.uploadStatusProgress, this.uploadStatusOlddata);
        this.uploadStatusOlddata = this.uploadStatusProgress; 
      }
    }

here, uploadCopy is another
Here, the variable 'uploadStatusProgress' is not getting updated on the html whenever its get changed.

Could anybody provide useful solution on this asap, please?

``` <div class="progress" *ngIf="isuploadingProgress"> <p style="padding: 0; margin: 0" *ngIf="uploadCopy.isUploading">Uploading {{uploadCopy.queue.length}} files</p> <div class="progress-bar"> <p class="progress-content" role="progressbar" [ngStyle]="{ 'width': uploadStatusProgress + '%' }"></p></div> <button class="cancelUploadBtn" (click)="cancelUpload()">Cancel</button> </div> ``` in .ts ``` if(this.uploadStatusOlddata !== this.uploadStatusProgress){ this.uploadCopy.onProgressAll = (data:any) => { this.uploadStatusProgress = data; console.log("this.uploadStatusProgress ", this.uploadStatusProgress, this.uploadStatusOlddata); this.uploadStatusOlddata = this.uploadStatusProgress; } } ``` here, uploadCopy is another Here, the variable 'uploadStatusProgress' is not getting updated on the html whenever its get changed. Could anybody provide useful solution on this asap, please?

👍 1

sdoubey commented

2017-03-23 15:17:45 +00:00

(Migrated from github.com)

You can use ChangeDetectorRef

constructor(private detector: ChangeDetectorRef)

then

this.uploader.onProgressAll = (progress: any) => this.detector.detectChanges();

You can use ChangeDetectorRef `constructor(private detector: ChangeDetectorRef)` then `this.uploader.onProgressAll = (progress: any) => this.detector.detectChanges();`

👍 7

Sathishchary commented

2018-11-18 16:05:14 +00:00

(Migrated from github.com)

thanks @sdoubey , its working

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#691