From 15a09e4b0542d3ee8082c2dd7ca8ed9bdd2c402f Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 20 Jul 2020 14:13:30 +0200 Subject: [PATCH] Attempt to fix multiple queue events for file upload --- .../resumable-file-upload.service.ts | 301 +++++++++--------- 1 file changed, 152 insertions(+), 149 deletions(-) diff --git a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts index 390df73..ba45c7a 100644 --- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts +++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts @@ -1,149 +1,152 @@ -import { Injectable, OnDestroy } from '@angular/core'; -import { OAuthService } from 'angular-oauth2-oidc'; -import { Subject , Subscription } from 'rxjs'; -import { HttpClient } from "@angular/common/http"; -import { UploadxService, UploadState,UploadxOptions} from 'ngx-uploadx'; -import { AppConfig } from '../../shared/app.config'; - - -@Injectable({ providedIn: 'root' }) -export class ResumableFileUploadService implements OnDestroy{ - public files: Array = new Array(); - public isUploading = false; - public totalProgress = 0; - public isClosed = true; - public isMinimized = false; - public parentCode: string; - public refresh: Subject = new Subject(); - private _eventSub:Subscription; - private initialized = false; - - constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) { - - } - - endPoint() { - return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`; - } - - init() { - if(!this.initialized) { - this._eventSub=this.uploadService.init({ - endpoint:this.endPoint(), - token:() => this.oauthService.getAccessToken(), - chunkSize: 2097152}).subscribe((uploadState:UploadState) => { - this.handleState(uploadState); - } ); - this.initialized=true; - } - } - - updatetotalprogress() { - var totalProgress =0; - var n=0; - for(var i =0;i f.identifier == state.uploadId ) - if(file) { - file.progress = (state.progress?state.progress:0); - } - };break; - case "complete": { - var file =this.files.find((f) => f.identifier == state.uploadId ) - if(file) { - var parts = state.url.split("/"); - file.itemCode = parts[parts.length-1]; - file.progress = (state.progress?state.progress:0); - file.success=true; - } - };break; - case "error": { - var file =this.files.find((f) => f.identifier == state.uploadId ) - if(file) { - file.error=true; - file.errorMessage = state.response; - } - };break; - } - this.updatetotalprogress(); - this.refresh.next({}); - } - - addFiles = (files: any[], event: any, metadata:any) => { - for (let f of files) { - var options:UploadxOptions = {metadata:metadata}; - this.uploadService.handleFile(f,options); - } - } - - toggleMinimize = function () { - this.isMinimized = !this.isMinimized; - }; - - cancelFile = function (file) { - this.uploadService.control({action:'cancel',uploadId:file.identifier}); - var index = this.files.indexOf(file, 0); - if (index > -1) { - this.files.splice(index, 1); - } - }; - - doClose = function () { - this.uploadService.control({action:'cancelAll'}); - this.files = new Array(); - this.isClosed = true; - } - - close = function () { - let close = true; - if (this.isUploading) { - close = false; - } - if (close) { - this.doClose(); - } - } - - ngOnDestroy() { - if(this._eventSub) this._eventSub.unsubscribe(); - } -} - -export class File { - private file: any; - public fileName: string; - public progress: number; - public identifier: string; - public itemCode: string; - public success: boolean; - public error: boolean; - public errorMessage: string; - - - constructor(state: UploadState) { - this.file = state; - this.fileName = state.file.name; - this.progress = state.progress?state.progress:0; - this.identifier = state.uploadId; - this.success = false; - this.error = false; - this.errorMessage = ""; - this.itemCode = null; - } -} +import { Injectable, OnDestroy } from '@angular/core'; +import { OAuthService } from 'angular-oauth2-oidc'; +import { Subject , Subscription } from 'rxjs'; +import { HttpClient } from "@angular/common/http"; +import { UploadxService, UploadState,UploadxOptions} from 'ngx-uploadx'; +import { AppConfig } from '../../shared/app.config'; + + +@Injectable({ providedIn: 'root' }) +export class ResumableFileUploadService implements OnDestroy{ + public files: Array = new Array(); + public isUploading = false; + public totalProgress = 0; + public isClosed = true; + public isMinimized = false; + public parentCode: string; + public refresh: Subject = new Subject(); + private _eventSub:Subscription; + private initialized = false; + + constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) { + + } + + endPoint() { + return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`; + } + + init() { + if(!this.initialized) { + this._eventSub=this.uploadService.init({ + endpoint:this.endPoint(), + token:() => this.oauthService.getAccessToken(), + chunkSize: 2097152}).subscribe((uploadState:UploadState) => { + this.handleState(uploadState); + } ); + this.initialized=true; + } + } + + updatetotalprogress() { + var totalProgress =0; + var n=0; + for(var i =0;i f.identifier == state.uploadId ) + if(!file) { + this.files.push(new File(state)); + this.isClosed=false; + } + };break; + case "uploading": { + this.isUploading = true; + var file =this.files.find((f) => f.identifier == state.uploadId ) + if(file) { + file.progress = (state.progress?state.progress:0); + } + };break; + case "complete": { + var file =this.files.find((f) => f.identifier == state.uploadId ) + if(file) { + var parts = state.url.split("/"); + file.itemCode = parts[parts.length-1]; + file.progress = (state.progress?state.progress:0); + file.success=true; + } + };break; + case "error": { + var file =this.files.find((f) => f.identifier == state.uploadId ) + if(file) { + file.error=true; + file.errorMessage = state.response as string; + } + };break; + } + this.updatetotalprogress(); + this.refresh.next({}); + } + + addFiles = (files: any[], event: any, metadata:any) => { + for (let f of files) { + var options:UploadxOptions = {metadata:metadata}; + this.uploadService.handleFile(f,options); + } + } + + toggleMinimize = function () { + this.isMinimized = !this.isMinimized; + }; + + cancelFile = function (file) { + this.uploadService.control({action:'cancel',uploadId:file.identifier}); + var index = this.files.indexOf(file, 0); + if (index > -1) { + this.files.splice(index, 1); + } + }; + + doClose = function () { + this.uploadService.control({action:'cancelAll'}); + this.files = new Array(); + this.isClosed = true; + } + + close = function () { + let close = true; + if (this.isUploading) { + close = false; + } + if (close) { + this.doClose(); + } + } + + ngOnDestroy() { + if(this._eventSub) this._eventSub.unsubscribe(); + } +} + +export class File { + private file: any; + public fileName: string; + public progress: number; + public identifier: string; + public itemCode: string; + public success: boolean; + public error: boolean; + public errorMessage: string; + + + constructor(state: UploadState) { + this.file = state; + this.fileName = state.file.name; + this.progress = state.progress?state.progress:0; + this.identifier = state.uploadId; + this.success = false; + this.error = false; + this.errorMessage = ""; + this.itemCode = null; + } +}