Individual progress bar for each submission

Ionic Native
1

Today I can upload files by displaying a progress bar. when I make a new request the values ​​of the progress bar are alternating between the values ​​of each shipment. In this way, I would like to show the progress bar individually for each document that is being sent, being able to add the description and the progress bar of the respective submission to the layout.

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>

Page:

 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() 
      }
    })
  }

Service:

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()
  }

}

Expected result:
resultado

2

Personally, I would replace both the cordova HTTP and file transfer plugins with ordinary Angular HttpClient, but that’s tangential. You have but one notion of “progress” in your service, whereas you need to have one per request.

1 Like
3

How can i do ito have one per request??

4

You could have parallel lists, or you could add the progress level to your existing transaction object.

1 Like