[IONIC 4] Progress bar not progressing while uploading file

Ionic Framework ionic-v3
1

Hi guys !

I’m implementing a simple progress bar in my Ionic 4 project, but it doesn’t progress at all while I’m uploading a file unless I click anywhere on my app.
If I don’t click, it juste stays at 0, but when I click somewhere, the progress bar gets updated so it progresses.

How to do to make it progress without clicking anywhere ?

Here’s my ts file:

export class MyUploadPage implements OnInit {

    uploadPercent: any = 0;
    videoFileUpload: FileTransferObject;

    constructor(...) {}

    this.videoFileUpload.onProgress((data) => {
          this.uploadPercent = Math.round(data.loaded / data.total);
    });
}

Here’s my progress bar:

<ion-row class="uploading">
  <ion-col text-center>
    <ion-progress-bar [value]="uploadPercent"></ion-progress-bar>
  </ion-col>
</ion-row>

Any ideas ? Thanks !

2

Ok guys, found something, here’s the solution !
You have to upload your variable inside a NgZone.run:

this.videoFileUpload.onProgress((data) => {
    this.ngZone.run(() => {
        this.uploadPercent = (data.loaded / data.total).toFixed(2);
    });
});

Hope it’ll help someone, someday :wink:

2 Likes
3

Can you use observable to:
HTML:

<ion-item *ngIf="aux != 0">
    <ion-text >{{aux}}% </ion-text>
    <ion-label class="porcentagem"><ion-progress-bar [value]="porcentagem"></ion-progress-bar></ion-label>
    <ion-button color="danger" (click)="cancelarEnvio()">Cancelar</ion-button>
  </ion-item>

Pagina:

 ngOnInit() {
    this.apiService.getPorcentagemObservable().subscribe(res => {
      console.log('Novo Valor: ', res)
      
      if(res == 1){
        this.porcentagem = res / 100
        this.aux = res
      } else if (res == 100) {
        this.porcentagem = 0
        this.aux = 0
        this.changeDetectorRef.detectChanges()
      } else {
        this.porcentagem = res / 100
        this.aux = res
        this.changeDetectorRef.detectChanges() 
      }
    })
  }

Serviço:

import { Camera, CameraOptions, MediaType } from '@ionic-native/camera/ngx';
import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer/ngx';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  fileTransfer: FileTransferObject = this.transfer.create();
  private porcentagem = new BehaviorSubject(0)
  usuario:any   
  codigo:any


//=============================================> Construtor <=========================================

  constructor
  ( 
    private http: HTTP,
    private transfer : FileTransfer,

  ) {}

  salvarMalote(payload){
    console.log(payload)
    
    var filePath = payload.imageURI;
    var filename = filePath.split("/").pop();
    var extencao = filename.split(".").pop();
    let server
    var options : FileUploadOptions;

    let url //My url
    server = url 
    options = {
        fileKey: "file",
        fileName: filename,
        chunkedMode: false,

        headers: {
            Connecection: "close"
        },
        params: {
            Codigo: this.codigo,
            descricao: payload.descricao,
            email: this.usuario
        }
    }

 
    //Verificação de progresso 

    this.fileTransfer.onProgress((progressEvent) => {
      let perc
      if (progressEvent.lengthComputable) {
        perc = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
        this.setPorcentagem(perc)
      } else {
        perc ++
      }
    });

    //upload

    console.log(filePath, server, options)
    return this.fileTransfer.upload(filePath, server, options).then((data) =>{
      let retorno = JSON.parse(data.response)
      console.log(retorno)
      if (retorno.sucesso) {
        this.setPorcentagem(100)
      } else {
        console.log('erro')
      }
      console.log()
    }, (error) => {
      console.log(error)
    });
  }

  //Metodos Observable

  setPorcentagem(perc){
    if (perc == 100) {
      this.porcentagem.next(0)
    } else{
      this.porcentagem.next(perc)
    }
  }

  getconst(): number {
    return  this.porcentagem.getValue()
  }
  
  getPorcentagemObservable():Observable<number>{
    return this.porcentagem.asObservable()
  }

  abortar(){
    this.porcentagem.next(0)
    this.fileTransfer.abort()
  }

}