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: