Attempt to fix multiple queue events for file upload
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
This commit is contained in:
Willem Dantuma
@@ -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<File> = new Array<File>();
|
||||
public isUploading = false;
|
||||
public totalProgress = 0;
|
||||
public isClosed = true;
|
||||
public isMinimized = false;
|
||||
public parentCode: string;
|
||||
public refresh: Subject<any> = new Subject<any>();
|
||||
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<this.files.length;i++) {
|
||||
if(!this.files[i].error) {
|
||||
totalProgress+=this.files[i].progress;
|
||||
n++;
|
||||
}
|
||||
}
|
||||
this.totalProgress=totalProgress/this.files.length;
|
||||
if(this.totalProgress==100) this.isUploading=false;
|
||||
}
|
||||
|
||||
handleState(state:UploadState) {
|
||||
switch(state.status) {
|
||||
case "queue": {
|
||||
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;
|
||||
}
|
||||
};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<File>();
|
||||
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<File> = new Array<File>();
|
||||
public isUploading = false;
|
||||
public totalProgress = 0;
|
||||
public isClosed = true;
|
||||
public isMinimized = false;
|
||||
public parentCode: string;
|
||||
public refresh: Subject<any> = new Subject<any>();
|
||||
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<this.files.length;i++) {
|
||||
if(!this.files[i].error) {
|
||||
totalProgress+=this.files[i].progress;
|
||||
n++;
|
||||
}
|
||||
}
|
||||
this.totalProgress=totalProgress/this.files.length;
|
||||
if(this.totalProgress==100) this.isUploading=false;
|
||||
}
|
||||
|
||||
handleState(state:UploadState) {
|
||||
switch(state.status) {
|
||||
case "queue": {
|
||||
var file =this.files.find((f) => 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<File>();
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user