cordova.fileTransfer not updating page template Ionic2+Cordova

raju Published at Dev

raju

I have created an Ionic2 App using cordova FileTransferplugin, i am downloading remote server file.

Everything is working perfectly, but when I try to update template while fileTransfer.OnProgress event, the template is not updating the % downloaded.

Pleas see this video for my problem. Ionic_youtube_link

My Code is, logic is in downloadFile function

import {Component, AfterViewInit, ViewChild} from '@angular/core';
import {NavController, NavParams, ViewController, Nav} from 'ionic-angular';

import {Page, Platform} from 'ionic-angular';
import {File, Device, Cordova, Transfer} from 'ionic-native';

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

@Component({
  templateUrl: 'build/pages/video-download-modal/video-download-modal.html',
  providers: [File, Transfer]
})
export class VideoDownloadModal {
  selectedItem: any;
  @ViewChild(Nav) nav: Nav;

  videoPathUrl: string;
  isPlatformReady: boolean;
  platformName: string;
  directoryName: string = "socialAppDir";

  totalVideoSize:number;
  totalDownloaded:number;
  totalPercent:string = "0%";

  constructor(public navCtrl: NavController, navParams: NavParams, private _viewController: ViewController, platform: Platform, private transfer:Transfer) {
    // If we navigated to this page, we will have an item available as a nav param
    if (platform.is('core')) {//if on dekstop
      console.log('dektop');
    } else {
      this.videoPathUrl = navParams.get('videoPath');
      console.log(this.videoPathUrl);
      platform.ready().then((readySource) => {
        this.isPlatformReady = true;
        console.log('ready 1234');
        const fs: string = cordova.file.externalRootDirectory;
        console.log(cordova.file.dataDirectory);
        this.platformName = Device.device.platform;

        File.checkDir(cordova.file.externalDataDirectory, this.directoryName).then(() => {
          console.log('directory exists');
          this.downloadFile();
        }, (error) => {
          console.log('directory not exists');
          this.createDirectory();
        })

      })
    }
  }
  dismiss() {
    let data = { 'foo': 'bar' };
    this._viewController.dismiss(data);
  }

  createDirectory():void{
    File.createDir(cordova.file.externalDataDirectory, this.directoryName, true).then(() => {
      console.log("created externalDataDirectory");
      this.downloadFile();
    },(error) => {
      console.log('some error happen')
    })
  }

  downloadFile = () => {
    console.log(this);
    let fileName: string = this.videoPathUrl.split("/").pop();
    let targetPath = cordova.file.externalDataDirectory + this.directoryName + "/" + fileName;
    console.log(targetPath);
    this.transfer.download(this.videoPathUrl, targetPath, true, {}).then(() => {
      console.log('video downloaded')
    }, (error) => {
      console.log(error)
    })
    this.transfer.onProgress((progress) => {
      console.log(this);
      this.totalVideoSize = progress.total;
      this.totalDownloaded = progress.loaded;
      this.totalPercent = ((progress.loaded / progress.total) * 100).toString();

      console.log(this.totalPercent);
    })
  }

  ionViewDidEnter() {
    console.log("enter login1");
  }    
}

And HTML is

<ion-content>


<div id="modalContainer" class="abd">
    <ion-spinner></ion-spinner>
    <br />
    {{**totalPercent**}}
    <br />
    <button dnager block (click)="dismiss()">Exit</button>
  </div>
</ion-content>

The totalPercent value either has 0 or 100.But not updating. Please help.

Ken Chang

This is because the totalPercent of this inside the handler was set to the global Window object instead of the object itself.

I have finally got it to work

import { NgZone } from '@angular/core';

fileTransfer.onProgress((progressEvent: ProgressEvent) => {
  this.ngZone.run(() => {
    if (progressEvent.lengthComputable) {
      let lp = progressEvent.loaded / progressEvent.total * 100;
      this.loadingPercent = Math.round(lp * 100) / 100;
    }
  });
})

Collected from the Internet

Please contact [email protected] to delete if infringement.