Hi all, I have a very weird problem, I hope some of you know the answer to my problem. I am using FileTransfer to upload image from a collection of images. While uploading im trying to update my progress bar. Although the uploading is going as it should (see screenshot of the console.logs) it does …

Thank you for the hint. I’ve managed to get it to work without JQuery and or native js. I’ve updated my example (with the ionic-native wrapper) here :slight_smile:

Since it requires cordova I guess a code pen will not work. So I went ahead and created a repo for you to check. REPO => deleted Just take some pictures with the camera and press start uploading. The view does not update, but if you check the console with chrome inspect the logs show progress is …

Hmm, so what I’m guess is that the file transfer happens outside of angular’s zones, so it doesn’t know how to update the bindings. At the moment, the file transfer plugin isn’t in ionic-native, but there’s an issue open for it. [image] Issue: Cordova File Transfer Plugin opened by…

Hmm. Any idea when ‘soon’ is? :slight_smile: Days? Weeks? Months?

I guess that most probably the problem that you’re observing is caused by this: [image] mhartington: Hmm, so what I’m guess is that the file transfer happens outside of angular’s zones, so it doesn’t know how to update the bindings. however you might also check if something like this will wo…

@iignatov l’ll try that tonight when I come home. Am I correct if I say the e is an event object? If so what event is it? If you look at my onProgress function, it already recieves an event. onProgress = (progressEvent: ProgressEvent) : void => { if (progressEvent.lengthComputable) { …

@dtaalbers Yes, e is the event object. It’s of type ProgressEvent. You can also write it this way: ft.onprogress = (e: ProgressEvent) => this.onProgress(e);

I get it thanks :slight_smile: fyi; I don’t have the problem of a missing event. My current code as in onProgress = (progressEvent: ProgressEvent) : void => { ... } has an event there. I have no problem accesssing it. Could your suggestion give the current scope (as in this) to the onProgress fu…

If the issue that you’re observing is caused by the (unexpected) value of this then the change that I suggested might resolve it. I created a simple (maybe too oversimplified) test to illustrate this. You can check it out in this demo environment .

if you need update DOM you can use native js. No need to clutter up the code. However, you can read about zone.js with Angular 2 for the DOM forcing update. Google it.

Progress binding is not updating while uploading

Ionic Framework ionic-v3

dtaalbers March 31, 2016, 6:01pm 13

Sadly I can’t get it work. Probably have to wait until this plugin goes ionic native. For now I used filthy jquery to update the DOM elements.

Thanks for the help boys!

Ionic2 File-transfer callback scoping issue

Topic		Replies	Views
[IONIC 4] Progress bar not progressing while uploading file ionic-v3	2	2798	January 27, 2021
Ionic not updating view ionic-v3	2	1761	August 15, 2017
View not updating in Ionic 2 ionic-v3	9	2442	April 15, 2017
When the file is downloaded I want to show progress bar ionic-v3	18	10833	July 19, 2021
Progress bar in ionic 3 ionic-v3	3	1635	July 19, 2021

Progress binding is not updating while uploading

Related topics