1

hoje consigo realizar o envio de arquivos exibindo uma barra de progresso. quando faço uma nova requisição os valores da barra de progresso ficam alternando entre os valores de cada envio. Desse modo, gostaria de mostrar a barra de progresso individualmente para cada documento que está sendo enviado, podendo adicionar no layout a descrição e a barra de progresso do respectivo envio.


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

}

Resultado Esperado:

inserir a descrição da imagem aqui

2 Respostas 2

1

Bom dia, você poderia testar essa solução, pode ser que você precise adaptar alguma coisa, não testei completamente.

HTML

 <ion-item *ngFor="let item of apiService.getPorcentagemObservable()" >
    <div *ngIf="item|async">
      <ion-text >{{item.value.nome}} {{item.value.porcentagem}}% </ion-text>
      <ion-label class="porcentagem"><ion-progress-bar [value]="{{item.value.porcentagem}}"></ion-progress-bar></ion-label>
    <ion-button color="danger" (click)="cancelarEnvio()">Cancelar</ion-button>
    </div>
  </ion-item>

Página

constructor(public apiService: ApiService) {}

Serviço

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)
    private porcentagem: Array<BehaviorSubject<{ id: string, aux: number, porcentagem: string, nome: string }>> = []

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

        let id = Date.now()
        //Verificação de progresso 

        this.fileTransfer.onProgress((progressEvent) => {
            let perc
            if (progressEvent.lengthComputable) {
                perc = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
                this.setPorcentagem(perc, id, filename)
            } 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, id, filename)
            } else {
                console.log('erro')
            }
            console.log()
        }, (error) => {
            console.log(error)
        });
    }

    //Metodos Observable

    setPorcentagem(perc, id, filename) {
        let porcentagem;
        let aux;
        let already = this.porcentagem.findIndex(i => {

            return i.value.id == id
        })
        console.log(already);

        if (perc == 1) {
            porcentagem = perc / 100
            aux = perc
        } else if (perc == 100) {
            porcentagem = 0
            aux = 0
        } else {
            porcentagem = perc / 100
            aux = perc
        }

        if (already != -1) {
            let value = this.porcentagem[already].value;
            value.porcentagem = porcentagem;
            value.aux = aux;
            this.porcentagem[already].next(value)
        } else {
            this.porcentagem.push(new BehaviorSubject({ id: id, aux: aux, porcentagem: porcentagem, nome: filename }))
        }
    }


    getPorcentagemObservable(): Array<BehaviorSubject<{ id: string, porcentagem: string }>> {
        return this.porcentagem;
    }


}
4
  • Muito obrigado, amanhã tentarei essa solução e te falo Commented 28/01/2021 às 20:05
  • A funcionalidade agora está perfeita, antes a barra de progresso estava carregando apenas no final do processo, tentei adicionar o public changeDetectorRef : ChangeDetectorRef, embaixo de cada if no setPorcentagem() mas ele nao reconheceu por se tratar de um service, no entanto adicionei o applicationRef.tick() que tem amesma função e ai ele carregou normalmente Commented 29/01/2021 às 18:48
  • Ótimo que deu certo Commented 30/01/2021 às 21:31
  • Alison boa tarde, você por acaso saberia me dizer como remover um item do Array<BehaviorSubject e atualizar a pagina ao concluir upload?? Commented 8/02/2021 às 17:46
0

Hérick Raposo,

Para remover um item do array você pode tentar isso:

  removeBehaviorById(id) {
    this.porcentagem = this.porcentagem.map((behavior) => {
      if (behavior.value.id == id) {

        //Primeiro atualiza o status para null, pois os ouvintes vao entender que nao ha mais nada para atualizar
        behavior.next(null)
        // dar um unsubscribe para parar de emitir eventos
        behavior.unsubscribe()
      }

      // e por fim remove ele do array
      if (behavior.value.id != id) {
        return behavior;
      }
    })
  }
2
  • Obrigado, irei tentar Commented 15/02/2021 às 12:36
  • Você sabe se é possível atualizar/refrescar a página após isso? Commented 17/02/2021 às 18:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .