import { HttpEventType } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; import { ConsumerStatusService, FileStatus, FileStatusPhase } from 'src/app/services/consumer-status.service'; import { DocumentService } from 'src/app/services/rest/document.service'; const MAX_ALERTS = 5 @Component({ selector: 'app-upload-file-widget', templateUrl: './upload-file-widget.component.html', styleUrls: ['./upload-file-widget.component.scss'] }) export class UploadFileWidgetComponent implements OnInit { alertsExpanded = false constructor( private documentService: DocumentService, private consumerStatusService: ConsumerStatusService ) { } getStatus() { return this.consumerStatusService.getConsumerStatus().slice(0, MAX_ALERTS) } getStatusesHidden() { if (this.consumerStatusService.getConsumerStatus().length < MAX_ALERTS) return [] else return this.consumerStatusService.getConsumerStatus().slice(MAX_ALERTS) } getStatusUploading() { return this.consumerStatusService.getConsumerStatus(FileStatusPhase.UPLOADING) } getTotalUploadProgress() { let current = 0 let max = 0 this.getStatusUploading().forEach(status => { current += status.currentPhaseProgress max += status.currentPhaseMaxProgress }) return current / Math.max(max, 1) } isFinished(status: FileStatus) { return status.phase == FileStatusPhase.FAILED || status.phase == FileStatusPhase.SUCCESS } getStatusColor(status: FileStatus) { switch (status.phase) { case FileStatusPhase.PROCESSING: case FileStatusPhase.UPLOADING: return "primary" case FileStatusPhase.FAILED: return "danger" case FileStatusPhase.SUCCESS: return "success" } } dismiss(status: FileStatus) { this.consumerStatusService.dismiss(status) } dismissAll() { this.consumerStatusService.dismissAll() } ngOnInit(): void { } public fileOver(event){ } public fileLeave(event){ } public dropped(files: NgxFileDropEntry[]) { for (const droppedFile of files) { if (droppedFile.fileEntry.isFile) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; fileEntry.file((file: File) => { let formData = new FormData() formData.append('document', file, file.name) let status = this.consumerStatusService.newFileUpload(file.name) status.message = $localize`Connecting...` this.documentService.uploadDocument(formData).subscribe(event => { if (event.type == HttpEventType.UploadProgress) { status.updateProgress(FileStatusPhase.UPLOADING, event.loaded, event.total) status.message = $localize`Uploading...` } else if (event.type == HttpEventType.Response) { status.taskId = event.body["task_id"] status.message = $localize`Waiting for consumer...` } }, error => { status.updateProgress(FileStatusPhase.FAILED) switch (error.status) { case 400: { status.message = error.error.document break; } default: { status.message = `${error.status} ${error.statusText}` break; } } }) }); } } } }