FileItem progress property not updating. #451

New Issue

2016-10-12T22:21:54Z

bryansoto commented

2016-10-12 22:21:54 +00:00

(Migrated from github.com)

I think PR#30 was reverted. With IE11, Firefox and Chrome (all latest), FileItem progress in console jumps from 0 to 100 with no intermediate values displayed.

I think [PR#30](https://github.com/valor-software/ng2-file-upload/pull/30) was reverted. With IE11, Firefox and Chrome (all latest), FileItem progress in console jumps from 0 to 100 with no intermediate values displayed.

👍 10

ghost commented

2016-10-31 18:52:52 +00:00

(Migrated from github.com)

Same here.

rightisleft commented

2016-11-15 18:54:26 +00:00

(Migrated from github.com)

same

ghost commented

2016-11-16 07:44:37 +00:00

(Migrated from github.com)

I find that if I click the window/view during upload, it suddenly fires the event and shows progress.

deeweey commented

2016-11-19 14:30:50 +00:00

(Migrated from github.com)

I'm experiencing the same problem, did one of you found a workaround for this?

bryansoto commented

2016-11-21 16:50:46 +00:00

(Migrated from github.com)

I haven't tried, to be honest. It's a low priority for us in comparison to the rest of the work we have going on. I did see that it's still happening with the latest 1.1.4-2 release though.

Akkusativobjekt commented

2016-11-24 08:30:51 +00:00

(Migrated from github.com)

I guess the problem is somehow related to the angular change detection. When you activate the change detection manually, the progress(bar) works again.

I just tested it with one item and the progress of this one item:

Inject ChangeDetectorRef to start the change detection manually:

constructor(private changeDetector: ChangeDetectorRef)

Add a handler to the item which is uploaded and call the change detector when the progress changes.

 public uploader: FileUploader = new FileUploader({ url: this.URL });

startUpload() {
    //checks for no selected file ...
    this.uploader.queue[0].onProgress = (progress: any) => {
      this.changeDetector.detectChanges();

    }
    //start Upload ...

I hope this helps ;)

I guess the problem is somehow related to the angular change detection. When you activate the change detection manually, the progress(bar) works again. _I just tested it with one item and the progress of this one item:_ Inject ChangeDetectorRef to start the change detection manually: `constructor(private changeDetector: ChangeDetectorRef)` Add a handler to the item which is uploaded and call the change detector when the progress changes. ``` public uploader: FileUploader = new FileUploader({ url: this.URL }); startUpload() { //checks for no selected file ... this.uploader.queue[0].onProgress = (progress: any) => { this.changeDetector.detectChanges(); } //start Upload ... ``` I hope this helps ;)

👍 10 🎉 1

tobiaseisenschenk commented

2016-12-18 20:48:47 +00:00

(Migrated from github.com)

Using the .onProgress callback as described by @Akkusativobjekt did not work for me. I could print the progress but not call the change detector.
I solved it by forcing angular to detect changes in an interval during the upload:

this.uploader.onCompleteItem = () => {
       clearInterval(this._interval);
     };

startUpload() = () => {
     this.refreshView();
     upload();
}

refreshView() {
    this._interval = setInterval(() => {
      this._changeDetector.detectChanges();
    }, 10);
  }

Using the .onProgress callback as described by @Akkusativobjekt did not work for me. I could print the progress but not call the change detector. I solved it by forcing angular to detect changes in an interval during the upload: ``` this.uploader.onCompleteItem = () => { clearInterval(this._interval); }; ``` ``` startUpload() = () => { this.refreshView(); upload(); } ``` ``` refreshView() { this._interval = setInterval(() => { this._changeDetector.detectChanges(); }, 10); } ```

deeg commented

2017-01-16 20:26:13 +00:00

(Migrated from github.com)

@valorkin, I'm also having this issue. While the work around may work, I think it would be best to fix this internally in the library.

The top post shows a PR which is said to be reverted which caused this issue again. Was there a reason it was reverted the first time, or would the correct fix for this to re-instate the fix in #30.

I would be happy to fix this and put out a PR, just looking for a little history before I start down the wrong path.

@valorkin, I'm also having this issue. While the work around may work, I think it would be best to fix this internally in the library. The top post shows a PR which is said to be reverted which caused this issue again. Was there a reason it was reverted the first time, or would the correct fix for this to re-instate the fix in #30. I would be happy to fix this and put out a PR, just looking for a little history before I start down the wrong path.

mkennedy3000 commented

2017-02-01 21:59:01 +00:00

(Migrated from github.com)

This is a problem because xhr.upload.onprogressand the like inside the FileUploader class are not running inside Angular's Zone and therefore change detection does not know about it.

A quick work around is to inject NgZone and run your onProgress update function inside there so something like this @Akkusativobjekt

constructor(private zone: NgZone) {...}

startUpload() {
    this.uploader.queue[0].onProgress = (progress: any) => {
        this.zone.run(() => {
           //update progress here
           this.progress = progress;
        });
    }
}

@valorkin I'm thinking the FileUploader should just be turned into a service instead of just a class so we don't have to manually run everything in the ngZone.

This is a problem because `xhr.upload.onprogress`and the like inside the FileUploader class are not running inside Angular's Zone and therefore change detection does not know about it. A quick work around is to inject NgZone and run your onProgress update function inside there so something like this @Akkusativobjekt ``` constructor(private zone: NgZone) {...} startUpload() { this.uploader.queue[0].onProgress = (progress: any) => { this.zone.run(() => { //update progress here this.progress = progress; }); } } ``` @valorkin I'm thinking the FileUploader should just be turned into a service instead of just a class so we don't have to manually run everything in the ngZone.

👍 2 🎉 2

alexduros commented

2017-04-10 15:21:16 +00:00

(Migrated from github.com)

I came up with an equivalent solution but I thought more coupled to the uploader API.
Actually, the uploader comes with a set of listeners :

https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts

So, in my case, I just overwrote it, forcing angular to detect changes (this is a typescript example):

this.uploader.onProgressItem = (file: FileItem, progress: any) => {
      this.changeDetector.detectChanges();
      return { file, progress };
    };

Not that it does cover all the states changes of the uploader, in particular, you will have to do the same kind of trick with the onCompleteItem for example to know the upload status.

I came up with an equivalent solution but I thought more coupled to the uploader API. Actually, the uploader comes with a set of listeners : https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts So, in my case, I just overwrote it, forcing angular to detect changes (this is a typescript example): ``` this.uploader.onProgressItem = (file: FileItem, progress: any) => { this.changeDetector.detectChanges(); return { file, progress }; }; ``` Not that it does cover all the states changes of the uploader, in particular, you will have to do the same kind of trick with the `onCompleteItem` for example to know the upload status.

👍 1

Markus-ipse commented

2017-04-28 12:22:01 +00:00

(Migrated from github.com)

I have a similar issue, but mine does not seem to be changeDetection-related.
It works fine in Chrome and IE, but in Edge onProgressItem doesn't fire at all until it's at 100%

I have a similar issue, but mine does not seem to be changeDetection-related. It works fine in Chrome and IE, but in Edge onProgressItem doesn't fire at all until it's at 100%

sonnguy commented

2017-06-15 03:35:57 +00:00

(Migrated from github.com)

Inject ChangeDetectorRef to start the change detection manually:

constructor(private changeDetector: ChangeDetectorRef)

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

It Work like a charm.

Inject ChangeDetectorRef to start the change detection manually: constructor(private changeDetector: ChangeDetectorRef) this.uploader.onProgressItem = (progress: any) => this.detector.detectChanges(); It Work like a charm.

mentatxx commented

2019-09-06 18:37:54 +00:00

(Migrated from github.com)

There is a better solution:

    (this.uploader as any)._render = () => this.changeDetector.markForCheck();

_render method is called each time when dependent component should be updated
it is protected, so properly is to extend base class, but this hack works too

There is a better solution: ``` (this.uploader as any)._render = () => this.changeDetector.markForCheck(); ``` _render method is called each time when dependent component should be updated it is protected, so properly is to extend base class, but this hack works too

camicase82 commented

2020-05-16 15:04:31 +00:00

(Migrated from github.com)

ChangeDetectorRef

Hi, sorry to bring back a thread that has been sleeping for too long, but now I'm struggling with the same and cannot find the full solution, can you elaborate a little more? I haven't bee able to get this working, progress just keeps saying 0 or 100? I think I'm missing just a small piece

> ChangeDetectorRef Hi, sorry to bring back a thread that has been sleeping for too long, but now I'm struggling with the same and cannot find the full solution, can you elaborate a little more? I haven't bee able to get this working, progress just keeps saying 0 or 100? I think I'm missing just a small piece

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#451