FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Attempt to fix multiple queue events for file upload
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-07-20 14:13:30 +02:00
parent 94f973406e
commit 15a09e4b05
1 changed files with 152 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts
View File

@ -1,149 +1,152 @@
import { Injectable, OnDestroy } from '@angular/core'; import { Injectable, OnDestroy } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc'; import { OAuthService } from 'angular-oauth2-oidc';
import { Subject , Subscription } from 'rxjs'; import { Subject , Subscription } from 'rxjs';
import { HttpClient } from "@angular/common/http"; import { HttpClient } from "@angular/common/http";
import { UploadxService, UploadState,UploadxOptions} from 'ngx-uploadx'; import { UploadxService, UploadState,UploadxOptions} from 'ngx-uploadx';
import { AppConfig } from '../../shared/app.config'; import { AppConfig } from '../../shared/app.config';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class ResumableFileUploadService implements OnDestroy{ export class ResumableFileUploadService implements OnDestroy{
public files: Array<File> = new Array<File>(); public files: Array<File> = new Array<File>();
public isUploading = false; public isUploading = false;
public totalProgress = 0; public totalProgress = 0;
public isClosed = true; public isClosed = true;
public isMinimized = false; public isMinimized = false;
public parentCode: string; public parentCode: string;
public refresh: Subject<any> = new Subject<any>(); public refresh: Subject<any> = new Subject<any>();
private _eventSub:Subscription; private _eventSub:Subscription;
private initialized = false; private initialized = false;
constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) { constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) {
} }
endPoint() { endPoint() {
return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`; return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`;
} }
init() { init() {
if(!this.initialized) { if(!this.initialized) {
this._eventSub=this.uploadService.init({ this._eventSub=this.uploadService.init({
endpoint:this.endPoint(), endpoint:this.endPoint(),
token:() => this.oauthService.getAccessToken(), token:() => this.oauthService.getAccessToken(),
chunkSize: 2097152}).subscribe((uploadState:UploadState) => { chunkSize: 2097152}).subscribe((uploadState:UploadState) => {
this.handleState(uploadState); this.handleState(uploadState);
} ); } );
this.initialized=true; this.initialized=true;
} }
} }
updatetotalprogress() { updatetotalprogress() {
var totalProgress =0; var totalProgress =0;
var n=0; var n=0;
for(var i =0;i<this.files.length;i++) { for(var i =0;i<this.files.length;i++) {
if(!this.files[i].error) { if(!this.files[i].error) {
totalProgress+=this.files[i].progress; totalProgress+=this.files[i].progress;
n++; n++;
} }
} }
this.totalProgress=totalProgress/this.files.length; this.totalProgress=totalProgress/this.files.length;
if(this.totalProgress==100) this.isUploading=false; if(this.totalProgress==100) this.isUploading=false;
} }
handleState(state:UploadState) { handleState(state:UploadState) {
switch(state.status) { switch(state.status) {
case "queue": { case "queue": {
this.files.push(new File(state)); var file =this.files.find((f) => f.identifier == state.uploadId )
this.isClosed=false; if(!file) {
};break; this.files.push(new File(state));
case "uploading": { this.isClosed=false;
this.isUploading = true; }
var file =this.files.find((f) => f.identifier == state.uploadId ) };break;
if(file) { case "uploading": {
file.progress = (state.progress?state.progress:0); this.isUploading = true;
} var file =this.files.find((f) => f.identifier == state.uploadId )
};break; if(file) {
case "complete": { file.progress = (state.progress?state.progress:0);
var file =this.files.find((f) => f.identifier == state.uploadId ) }
if(file) { };break;
var parts = state.url.split("/"); case "complete": {
file.itemCode = parts[parts.length-1]; var file =this.files.find((f) => f.identifier == state.uploadId )
file.progress = (state.progress?state.progress:0); if(file) {
file.success=true; var parts = state.url.split("/");
} file.itemCode = parts[parts.length-1];
};break; file.progress = (state.progress?state.progress:0);
case "error": { file.success=true;
var file =this.files.find((f) => f.identifier == state.uploadId ) }
if(file) { };break;
file.error=true; case "error": {
file.errorMessage = state.response; var file =this.files.find((f) => f.identifier == state.uploadId )
} if(file) {
};break; file.error=true;
} file.errorMessage = state.response as string;
this.updatetotalprogress(); }
this.refresh.next({}); };break;
} }
this.updatetotalprogress();
addFiles = (files: any[], event: any, metadata:any) => { this.refresh.next({});
for (let f of files) { }
var options:UploadxOptions = {metadata:metadata};
this.uploadService.handleFile(f,options); 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; }
};
toggleMinimize = function () {
cancelFile = function (file) { this.isMinimized = !this.isMinimized;
this.uploadService.control({action:'cancel',uploadId:file.identifier}); };
var index = this.files.indexOf(file, 0);
if (index > -1) { cancelFile = function (file) {
this.files.splice(index, 1); 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<File>();
this.isClosed = true; doClose = function () {
} this.uploadService.control({action:'cancelAll'});
this.files = new Array<File>();
close = function () { this.isClosed = true;
let close = true; }
if (this.isUploading) {
close = false; close = function () {
} let close = true;
if (close) { if (this.isUploading) {
this.doClose(); close = false;
} }
} if (close) {
this.doClose();
ngOnDestroy() { }
if(this._eventSub) this._eventSub.unsubscribe(); }
}
} ngOnDestroy() {
if(this._eventSub) this._eventSub.unsubscribe();
export class File { }
private file: any; }
public fileName: string;
public progress: number; export class File {
public identifier: string; private file: any;
public itemCode: string; public fileName: string;
public success: boolean; public progress: number;
public error: boolean; public identifier: string;
public errorMessage: string; public itemCode: string;
public success: boolean;
public error: boolean;
constructor(state: UploadState) { public errorMessage: string;
this.file = state;
this.fileName = state.file.name;
this.progress = state.progress?state.progress:0; constructor(state: UploadState) {
this.identifier = state.uploadId; this.file = state;
this.success = false; this.fileName = state.file.name;
this.error = false; this.progress = state.progress?state.progress:0;
this.errorMessage = ""; this.identifier = state.uploadId;
this.itemCode = null; this.success = false;
} this.error = false;
} this.errorMessage = "";
this.itemCode = null;
}
}