Progress binding is not updating while uploading

@dtaalbers wrote:

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 not update the view with the progress percentage.

But get this, when I add a input bound to progress like this <ion-input [(ngModel)]="progress" type="text"></ion-input> and enter something in the input the bindings trigger and they update my progress bar.

Also when I add a function setPercentage like this

setProgress = () : void => {
     this.progress = 90;
}

and bind it to a button

<div class="buttons">
    <button dark (click)="setProgress ()" class="btn">
        setPercentage
    </button>
</div>

it also updates the proggress and the progressbar in my view. And the finished binding doesnt work either, it should show my button when it is done uploading.

I would love to get some help on this, its bugging the hell out of me.

Schermafbeelding_032816_023538_PM.jpg1452x873 123 KB

My full .ts file here

import {Page, NavController, NavParams,} from 'ionic-angular';
import {Collection} from '../../models/Collection';
import {CollectionItem} from '../../models/CollectionItem';
import {Plugins} from '../../services/plugins.service';
import {Api} from '../../services/api.service';
import {Common} from '../../services/common.service';
import {CollectionListPage} from '../collection_list/collection_list';

@Page({
  templateUrl: 'build/pages/uploading/uploading.html',
})
export class UploadingPage {

    collection: Collection;
    uploading: boolean = false;
    progress: number = 0;
    finished: boolean = false;
    current: number = 1;
    total: number;
    collectionId: number;

    constructor(private nav: NavController,
                private navParams: NavParams,
                private api: Api,
                private common: Common,
                private plugins: Plugins) {

        this.collection = this.navParams.get("collection");
        this.total = this.collection.items.length;
        this.createCollection().then(response => {
            this.upload(this.collection.items[0]);
        });
    }

    done = () : void => {
        this.nav.setRoot(CollectionListPage);
    }

    success = (result: any) : void => {
        console.log("Uploading success", this.current);
        this.current++;
        if(this.current <= this.total) {
            console.log("Uploading next one: ", this.current);
            this.progress = 0;
            this.upload(this.collection.items[this.current - 1]);
        } else {
            console.log("Upload finished: ", this.current);
            this.finished = true;
        }
    }

    failed = (err: any) : void => {
        alert(err);
        console.log(err);
        console.log(err.error);
    }

    onProgress = (progressEvent: ProgressEvent) : void => {
        if (progressEvent.lengthComputable) {
            this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            console.log("Progress: ", this.progress);
        }
    }

    createCollection = () : Promise<void> => {
        return this.api.create.collection(this.collection).then(id =>  {
                this.collectionId = id;
            }
        );
    }

    upload = (item: CollectionItem) : void => {
        item.collectionId = this.collectionId;

            var ft = new FileTransfer();
            var filename = "image_" + this.current + ".jpg" ;
            var options = new FileUploadOptions();

            options.fileKey = "file";
            options.fileName = filename;
            options.mimeType = "image/jpeg"
            options.chunkedMode = false;
            options.headers = {
                'Content-Type' : undefined
            }
            options.params = {
                collectionId: item.collectionId,
                type: item.type,
                fileName: filename
            };

            ft.onprogress = this.onProgress;
            ft.upload(item.imageUrl, "http://api.com/collections/save", this.success, this.failed, options);

            this.plugins.file.upload(item, this.collection, this.current, this.success, this.failed, this.onProgress);
    }
}

My full view here:

<ion-content class="uploading">
    <h3>Image{{current}} of{{total}}</h3>
    <progress id="progressbar" max="100" value="{{ progress }}"> </progress>
    <div id="progressbarlabel">{{ progress }} %</div>
    <div class="buttons">
        <button [hidden]="!finished" dark (click)="done()" class="upload-button">
            Done
        </button>
    </div>
</ion-content>

Posts: 1

Participants: 1

Read full topic