Replace resumablejs with ngx-uploadx

2019-07-18 18:59:42 +02:00 · 2019-07-18 18:59:42 +02:00 · ff30ad1cbe
parent 670cb6ceb5
commit ff30ad1cbe
16 changed files with 130 additions and 1340 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -646,7 +646,7 @@
      "version": "file:dist/common",
      "requires": {
        "angular-oauth2-oidc": "^5.0.2",
-        "resumablejs": "1.1.0",
+        "ngx-uploadx": "^3.1.2",
        "tslib": "^1.9.0"
      }
    },
@ -6889,6 +6889,14 @@
        }
      }
    },
+    "ngx-uploadx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.2.tgz",
+      "integrity": "sha512-4SWS5AjucJFUOU7uBUCxXwstKqLOtbrHHRMlTZWKPnDM/fLdpA31ZBvBr2u7nxYL8amadWYkfmA987p9anyXbg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://repository.akkerweb.nl/repository/npm-group/nice-try/-/nice-try-1.0.5.tgz",
--- a/projects/common/package-lock.json
+++ b/projects/common/package-lock.json
@ -4,40 +4,6 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
-    "@angular/common": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.0.tgz",
-      "integrity": "sha512-5HNGT+XsY+7sQcNoFRqhbUfVdnBAtXaupmMbBclnQHTon9y9Ijp0ocYi7zxx39feo6xYF5HhBMnDPkFgtAnsYQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@angular/core": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.2.0.tgz",
-      "integrity": "sha512-tlCDDM9IknXvVLk1sg0lzCO4OREM54i1bFtTpl5kPtugK6l4kYCOH78UzDPHnOzzI3LGLj8Hb2NiObVa9c4fdg==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@ng-bootstrap/ng-bootstrap": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.2.1.tgz",
-      "integrity": "sha512-7etP9X9jKIkbuDzU3ngI2jQhHQDZxIu0ErvlkHb7u7YH9akIOLVkXvz2mTMvcFABWZhze64UjFuEgR46b6WGSw==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@ngrx/effects": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-7.2.0.tgz",
-      "integrity": "sha512-vymKSoubYlUWGbiclPK0N/LwB409sB9atjSTQRy2EisZfFtQ2tCDqmk4JGgDy/gV9SqZWrwPSy1xXsLqYnyN3g=="
-    },
-    "@ngrx/store": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-7.2.0.tgz",
-      "integrity": "sha512-E9c0cDot0HeE0mXyeqw18SwmJ2+eKnA5mMMfwvoskpMInCYGI2pq1i6/lCVQ2wrEHSH+KvObK4PQbepcA9vP+w=="
-    },
    "angular-oauth2-oidc": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
@ -52,6 +18,14 @@
      "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
      "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
    },
+    "ngx-uploadx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.2.tgz",
+      "integrity": "sha512-4SWS5AjucJFUOU7uBUCxXwstKqLOtbrHHRMlTZWKPnDM/fLdpA31ZBvBr2u7nxYL8amadWYkfmA987p9anyXbg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
    "tslib": {
      "version": "1.10.0",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
--- a/projects/common/package.json
+++ b/projects/common/package.json
@ -1,12 +1,12 @@
 {
  "name": "@farmmaps/common",
  "version": "0.0.1",
-  "publishConfig":{
-    "registry":"https://repository.akkerweb.nl/repository/npm-hosted/"
+  "publishConfig": {
+    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
  "dependencies": {
    "angular-oauth2-oidc": "^5.0.2",
-    "resumablejs": "1.1.0"
+    "ngx-uploadx": "^3.1.2"
  },
  "peerDependencies": {
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
--- a/projects/common/src/assets/resumable.js
+++ b/projects/common/src/assets/resumable.js
--- a/projects/common/src/lib/common.module.ts
+++ b/projects/common/src/lib/common.module.ts
@ -9,6 +9,7 @@ import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oaut
 import { StoreModule,Store } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {UploadxModule } from 'ngx-uploadx';


 // routing module
@ -98,7 +99,8 @@ export {FolderService,
    EffectsModule.forFeature([commonEffects.AppCommonEffects]),
    OAuthModule.forRoot(),
    NgbModule,
-    FormsModule
+    FormsModule,
+    UploadxModule
  ],
  providers: [
    DatePipe
@ -113,7 +115,7 @@ export {FolderService,
    TagInputComponent,
    SessionClearedComponent
  ],
-  exports: [NgbModule, ResumableFileUploadComponent, SidePanelComponent, CommonModule, HttpClientModule, SafePipe, TimespanComponent, TagInputComponent ]
+  exports: [NgbModule,UploadxModule, ResumableFileUploadComponent, SidePanelComponent, CommonModule, HttpClientModule, SafePipe, TimespanComponent, TagInputComponent ]
 })
 export class AppCommonModule {
  static forRoot(): ModuleWithProviders {
--- a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts
@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { ResumableFileUploadService, File } from './resumable-file-upload.service';
 import { Subscription } from 'rxjs';

@ -11,28 +11,6 @@ import { Subscription } from 'rxjs';

 export class ResumableFileUploadComponent implements OnInit, OnDestroy {

-  private browseFileElement$: ElementRef;
-
-  @Input('browseFileElement')
-  get browseFileElement(): ElementRef {
-    return this.browseFileElement$;
-  }
-
-  set browseFileElement(element: ElementRef) {
-    this.uploadService.assignFileBrowse(element);
-    this.browseFileElement$ = element;
-  }
-
-  @Input('browseDirectoryElement')
-  set browseDirectoryElement(element: ElementRef) {
-    this.uploadService.assignDirectoryBrowse(element);
-  }
-
-  @Input('fileDropElement')
-  set fileDropElement(element: ElementRef) {
-    this.uploadService.assignDrop(element);
-  }
-
  @Input('parentCode')
  set parentCode(parentCode: string) {
    if (parentCode && parentCode != "null" && parentCode != "")
@ -47,6 +25,7 @@ export class ResumableFileUploadComponent implements OnInit, OnDestroy {
    private refreshSub: Subscription;

    ngOnInit() {
+      this.uploadService.init();
      this.refreshSub = this.uploadService.refresh.subscribe((e: any) => {
        this.cd.markForCheck();
      });  
@ -56,7 +35,7 @@ export class ResumableFileUploadComponent implements OnInit, OnDestroy {
      if(this.refreshSub) this.refreshSub.unsubscribe();
    }

-    //this.cd.markForCheck();
+    //TODO do this with an canunload guard
    @HostListener('window:beforeunload')
    windowBeforeUnload = function () {
        if (this.uploadService.isUploading) {
--- a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts
@ -1,17 +1,13 @@
-import { Injectable, ElementRef } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { Subject ,  of } from 'rxjs';
-import { HttpClient, HttpParams } from "@angular/common/http";
+import { Subject , Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { UploadxService, UploadState} from 'ngx-uploadx';
+import { AppConfig } from '../../shared/app.config';


-declare var require; // avoid missing property error on require
-
-@Injectable()
-export class ResumableFileUploadService {
-  private resumable: any;
-  private dropElement: ElementRef;
-  private fileBrowseElement: ElementRef;
-  private directoryBrowseElement: ElementRef;
+@Injectable({ providedIn: 'root' })
+export class ResumableFileUploadService implements OnDestroy{
  public files: Array<File> = new Array<File>();
  public isUploading = false;
  public totalProgress = "0";
@ -19,138 +15,58 @@ export class ResumableFileUploadService {
  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) {
-    this.init();
+  constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) {
+   
  }

-  init = function () {
-    this.ref
-    require.ensure([], require => {
-      let Resumable = require('./resumable.js');
-      var other = this;
-      this.resumable = new Resumable(
-        {
-          target: '/api/v1/file/chunk',
-          query: function (file, chunk) {
-            var options = {};
-            if (file.parentCode) options["parentCode"] = file.parentCode;
-            if (chunk.tested) {
-              if (file.file.geoRefJson) options["geoRefJson"] = file.file.geoRefJson;
-              if (file.file.attributes) options["attributes"] = file.file.attributes;
-            }                         
-            return options;
-          },
-          headers: function (file) {
-            return { Authorization: "Bearer " + other.oauthService.getAccessToken() }
-          },
-          generateUniqueIdentifier: function (file, event) {
-            var params = new HttpParams()
-              .set("name", file.fileName || file.name)
-              .set("size", file.size);
+  endPoint() {
+    return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`;
+  }

-            return other.httpClient.post("/api/v1/file",params).toPromise().then(res => res.code);
-          },
-          chunkNumberParameterName: 'chunkNumber',
-          chunkSizeParameterName: 'chunkSize',
-          currentChunkSizeParameterName: 'currentChunkSize',
-          totalSizeParameterName: 'size',
-          typeParameterName: 'type',
-          identifierParameterName: 'code',
-          fileNameParameterName: 'name',
-          relativePathParameterName: 'relativePath',
-          totalChunksParameterName: 'totalChunks'
-        }
-      ) as any;
+  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;  
+    }
+  }

-      var other = this;
-
-      this.resumable.on('catchAll', function (event) {
-        other.isUploading = other.resumable.isUploading();
-        other.totalProgress = (other.resumable.progress() * 100).toFixed(0);
-        other.refresh.next({});
-      });
-
-      this.resumable.on('filesAdded', function (files) {
-        files.forEach(function (file) {
-          file.parentCode = other.parentCode;
-          other.files.push(new File(file));
-        });
-        other.isClosed = false;
-        other.resumable.upload();
-      });
-
-      this.resumable.on('fileSuccess', function (file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].success = true;
-        }
-      });
-
-      this.resumable.on('error', function (message,file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].error = true;
-          other.files[index].errorMessage = message;
-        }
-      });
-
-      this.resumable.on('fileProgress', function (file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].progress = (file.progress() * 100) + '%';
-        }
-      });
-
-      if (this.dropElement) this.resumable.assignDrop(this.dropElement);
-      if (this.fileBrowseElement) this.resumable.assignBrowse(this.fileBrowseElement);
-      if (this.directoryBrowseElement) this.resumable.assignBrowse(this.directoryBrowseElement, true);
-    });
+  handleState(state:UploadState) {
+      switch(state.status) {
+        case "added": {
+            this.files.push(new File(state));
+        };break;
+        case "uploading":
+        case "complete": {
+            var file =this.files.find((f) => f.identifier == state.uploadId )
+            if(file) {
+              file.progress = (state.progress * 100) + '%';
+            }
+        };break;
+      }
  }

  addFiles = (files: any[], event: any, geoRefJson?: string, attributes?: any) => {
    for (let f of files) {
-      if (geoRefJson) f.geoRefJson = geoRefJson;
-      if (attributes) f.attributes = JSON.stringify(attributes);
+      this.uploadService.handleFile(f);
+      // if (geoRefJson) f.geoRefJson = geoRefJson;
+      // if (attributes) f.attributes = JSON.stringify(attributes);
    }
-    this.resumable.addFiles(files, event);
  }
-
-  assignDrop = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignDrop(element);
-    }
-    this.dropElement = element;
-  }
-
-  assignFileBrowse = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignBrowse(element);
-    }
-    this.fileBrowseElement = element;
-  }
-
-  assignDirectoryBrowse = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignBrowse(element, true);
-    }
-    this.directoryBrowseElement = element;
-  }
-
-  getIndex = function (file) {
-    for (var i = 0; i < this.files.length; i++) {
-      if (this.files[i].identifier == file.uniqueIdentifier)
-        return i;
-    }
-    return -1;
-  }
-
+  
  toggleMinimize = function () {
    this.isMinimized = !this.isMinimized;
  };

  cancelFile = function (file) {
-    file.file.cancel();
+    this.uploadService.control({action:'cancel',uploadId:file.identifier});    
    var index = this.files.indexOf(file, 0);
    if (index > -1) {
      this.files.splice(index, 1);
@ -158,7 +74,7 @@ export class ResumableFileUploadService {
  };

  doClose = function () {
-    this.resumable.cancel();
+    this.uploadService.control({action:'cancelAll'});
    this.files = new Array<File>();
    this.isClosed = true;
  }
@ -172,6 +88,10 @@ export class ResumableFileUploadService {
      this.doClose();
    }
  }
+
+  ngOnDestroy() {
+    if(this._eventSub) this._eventSub.unsubscribe();
+  }
 }

 export class File {
@ -184,11 +104,11 @@ export class File {
  public errorMessage: string;


-  constructor(file: any) {
-    this.file = file;
-    this.fileName = file.fileName;
-    this.progress = (file.progress() * 100) + '%';
-    this.identifier = file.uniqueIdentifier;
+  constructor(state: UploadState) {
+    this.file = state;
+    this.fileName = state.file.name;
+    this.progress = (state.progress * 100) + '%';
+    this.identifier = state.uploadId;
    this.success = false;
    this.error = false;
    this.errorMessage = "";
--- a/projects/common/src/lib/components/timespan/timespan.component.ts
+++ b/projects/common/src/lib/components/timespan/timespan.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit,Input,ViewChild,ElementRef,OnChanges,AfterViewInit,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
+import { Component, OnInit,Input,ViewChild,OnChanges,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';

--- a/projects/common/src/lib/services/event.service.ts
+++ b/projects/common/src/lib/services/event.service.ts
@ -9,13 +9,13 @@ import { AppConfig } from "../shared/app.config";
@Injectable()
 export class EventService {

-    public event:Subject <IEventMessage> = new Subject<IEventMessage>();
+  public event:Subject <IEventMessage> = new Subject<IEventMessage>();
  private _connection: HubConnection = null;
  private _apiEndPoint: string;
    
  constructor(private oauthService: OAuthService, private appConfig: AppConfig) {
-    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
-    this._connection = new HubConnectionBuilder().withUrl(`${this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
+    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
+    this._connection = new HubConnectionBuilder().withUrl(`${ this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
    this._connection.start().then(() => {
      var accessToken = oauthService.getAccessToken();
      if (accessToken) {
--- a/projects/common/src/lib/services/folder.service.ts
+++ b/projects/common/src/lib/services/folder.service.ts
@ -8,10 +8,12 @@ import { AppConfig } from "../shared/app.config";

@Injectable()
 export class FolderService {
-    private _apiEndPoint: string;

-    constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-      this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
  }

  parseDates(item: any): IListItem {
@ -22,31 +24,31 @@ export class FolderService {
  }

    getFolder(code: string): Observable<IListItem> {
-      return this.httpClient.get<IListItem>(`${this._apiEndPoint}/api/v1/folders/${code}`).pipe(map(i => this.parseDates(i)));            
+      return this.httpClient.get<IListItem>(`${this.ApiEndpoint()}/api/v1/folders/${code}`).pipe(map(i => this.parseDates(i)));            
    }

    getMyRoots(): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/my_roots`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/my_roots`).pipe(map(ia => ia.map(i => this.parseDates(i))));
    }    

    getFolderParents(code: string): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/parents`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/parents`).pipe(map(ia => ia.map(i => this.parseDates(i))));
    }

    getChildFolders(code: string): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/listfolders`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/listfolders`).pipe(map(ia => ia.map(i => this.parseDates(i))));
    }

    getItems(code: string,skip:number, take:number): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/list?skip=${skip}&take=${take}`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/list?skip=${skip}&take=${take}`).pipe(map(ia => ia.map(i => this.parseDates(i))));
    }

    moveItem(itemCode: string, newParentCode: string): Observable<IListItem> {
        const body = { itemCode: itemCode,newParentCode: newParentCode };
-      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/items/move`, body).pipe(map(i => this.parseDates(i)));
+      return this.httpClient.post<IListItem>(`${this.ApiEndpoint()}/api/v1/items/move`, body).pipe(map(i => this.parseDates(i)));
    }

    createFolder(folder: IItem): Observable<IListItem> {
-      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/folders/`, folder).pipe(map(i => this.parseDates(i)));
+      return this.httpClient.post<IListItem>(`${this.ApiEndpoint()}/api/v1/folders/`, folder).pipe(map(i => this.parseDates(i)));
    }
 }
--- a/projects/common/src/lib/services/item.service.ts
+++ b/projects/common/src/lib/services/item.service.ts
@ -9,10 +9,11 @@ import { AppConfig } from "../shared/app.config";

@Injectable()
 export class ItemService {
-  private _apiEndPoint: string;
-
  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
  }

  parseDates(item: any): IItem {
@ -23,7 +24,7 @@ export class ItemService {
  }

  getItemTypes(): Observable<{ [id: string]: IItemType }> {
-    return this.httpClient.get<{ [id: string]: IItemType }>(`${this._apiEndPoint}/api/v1/itemtypes/`);
+    return this.httpClient.get<{ [id: string]: IItemType }>(`${this.ApiEndpoint()}/api/v1/itemtypes/`);
  }

  getFeatures(extent: number[], crs: string, searchText?: string, searchTags?:string,startDate?:Date,endDate?:Date): Observable<any> {
@ -34,21 +35,21 @@ export class ItemService {
    if (searchTags) params = params.append("t", searchTags);
    if (startDate) params = params.append("sd", startDate.toISOString());
    if (endDate) params = params.append("ed", endDate.toISOString());
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/features/`, {params:params});
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/features/`, {params:params});
  }

  getFeature(code:string, crs: string): Observable<any> {
    var params = new HttpParams();
    params = params.append("crs", crs);
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/feature/`, { params: params });
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/feature/`, { params: params });
  }

  getItem(code: string): Observable<IItem> {
-    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
+    return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
  }

  getItemByCodeAndType(code: string, itemType: string): Observable<IItem> {
-    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}/${itemType}`);
+    return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}/${itemType}`);
  }

  getItemList(itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@ -58,7 +59,7 @@ export class ItemService {
      params = params.append("df", JSON.stringify(dataFilter));
    }
    params = params.append("lvl", itemType);
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
  }

  getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@ -68,7 +69,7 @@ export class ItemService {
      params = params.append("df", JSON.stringify(dataFilter));
    }
    params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
  }

  getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@ -80,7 +81,7 @@ export class ItemService {
      params = params.append("df", JSON.stringify(dataFilter));
    }
    params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
  }

  getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
@ -88,32 +89,32 @@ export class ItemService {
    params = params.append("bbox", extent.join(","));
    params = params.append("crs", crs);
    if(layerIndex!=null)
-      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
+      return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
    else
-      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features`, { params: params });
+      return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features`, { params: params });
  }

  putItem(item:IItem): Observable<IItem> {
-    return this.httpClient.put<IItem>(`${this._apiEndPoint}/api/v1/items/${item.code}`,item);
+    return this.httpClient.put<IItem>(`${this.ApiEndpoint()}/api/v1/items/${item.code}`,item);
  }

  deleteItems(itemCodes:string[]): Observable<any> {
-    return this.httpClient.post<any>(`${this._apiEndPoint}/api/v1/items/delete`, itemCodes);
+    return this.httpClient.post<any>(`${this.ApiEndpoint()}/api/v1/items/delete`, itemCodes);
  }

  getTemporalLast(code: string): Observable<any> {
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/last`);
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/last`);
  }

  getTemporal(code: string, startDate?: Date, endDate?: Date): Observable<any> {
    var params = new HttpParams();
    if (startDate) params = params.append("sd", startDate.toISOString());
    if (endDate) params = params.append("ed", endDate.toISOString());
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/`, { params: params });
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/`, { params: params });
  }

  postItemTask(item: IItem, task: IItemTask): Observable<IItemTask> {
-    return this.httpClient.post<IItemTask>(`${this._apiEndPoint}/api/v1/items/${item.code}/tasks`, task);
+    return this.httpClient.post<IItemTask>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/tasks`, task);
  }
 }

--- a/projects/common/src/lib/services/typeahead.service.ts
+++ b/projects/common/src/lib/services/typeahead.service.ts
@ -6,17 +6,18 @@ import { AppConfig } from "../shared/app.config";

@Injectable()
 export class TypeaheadService {
-  private _apiEndPoint: string;
-
  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
  }

  getSearchTypeaheadItems(searchText:string,skip:number = 0,take:number = 10): Observable<ITypeaheadItem[]> {
-    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/search/?q=${searchText}&skip=${skip}&take=${take}`);
+    return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/search/?q=${searchText}&skip=${skip}&take=${take}`);
  }

  getTagTypeaheadItems(searchText: string, skip: number = 0, take: number = 10): Observable<ITypeaheadItem[]> {
-    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
+    return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
  }  
 }
--- a/projects/common/src/lib/services/user.service.ts
+++ b/projects/common/src/lib/services/user.service.ts
@ -6,13 +6,14 @@ import { AppConfig } from "../shared/app.config";

@Injectable()
 export class UserService {
-  private _apiEndPoint: string;
-
  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
  }

  getCurrentUser(): Observable<IUser> {
-    return this.httpClient.get<IUser>(`${this._apiEndPoint}/api/v1/currentuser`);
+    return this.httpClient.get<IUser>(`${this.ApiEndpoint()}/api/v1/currentuser`);
  }
 }
--- a/src/app/app-content.component.ts
+++ b/src/app/app-content.component.ts
@ -2,7 +2,7 @@ import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
-  template: '<div>Hello daar</div>'
+  template: '<div style="display:block;width:100%;height:200px;" >Hello daar<input type="file" [uploadx]="{chunkSize:2097152}" /> </div><resumable-file-upload></resumable-file-upload>'  
 })
 export class AppContentComponent {
 }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,23 +1,9 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 <h2>Common Test</h2>
 <router-outlet></router-outlet>
-<ul>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+

--- a/src/configuration.json
+++ b/src/configuration.json
@ -1,8 +1,8 @@
 {
    "issuer": "http://accounts.awtest.nl",
    "clientId": "v1t",
-    "audience": "http://localhost:8082/,http://awtest.nl/,http://aan.awtest.nl",
+    "audience": "http://localhost:8083/,http://awtest.nl/,http://aan.awtest.nl",
    "requireHttps": false,
-    "apiEndPoint": "http://localhost:8082"
+    "apiEndPoint": "http://localhost:8083"
  }