feat: add UploadxService.state() method (#350)

* refactor(ts): `stateChange` parameter type

* test: run tests with headless chrome

* test: stricter ts config

* feat: add `UploadxService.state()` method

Returns the current state of uploads.

README.md

@@ -239,6 +239,17 @@ selector: `uploadxDrop`
 
   Make HTTP request with `axios` like interface. [(example)](src/app/service-way/service-way.component.ts)
 
+- `state(): UploadState[]`
+
+  Returns the current state of uploads.
+
+  ```ts
+  constructor(private uploadService: UploadxService) {
+    // restore background uploads
+    this.uploads = this.uploadService.state();
+  }
+  ```
+
 - `queue: Uploader[]`
 
   Uploaders array.

karma.conf.js

@@ -34,7 +34,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false,
     restartOnFileChange: true
   });

package.json

@@ -27,7 +27,7 @@
   },
   "scripts": {
     "start": "run-p serve:dev server",
-    "test": "ng test --watch=false --progress=false --browsers=ChromeHeadless",
+    "test": "ng test --watch=false --progress=false",
     "e2e": "ng e2e",
     "lint": "ng lint",
     "serve:dev": "ng serve",

src/app/service-code-way/service-code-way.component.spec.ts

@@ -15,6 +15,7 @@ describe('ServiceCodeWayComponent', () => {
       init: jasmine.createSpy('init'),
       control: jasmine.createSpy('control'),
       handleFiles: jasmine.createSpy('handleFiles'),
+      state: () => [],
       queue: []
     };
     TestBed.configureTestingModule({

src/app/service-code-way/service-code-way.component.ts

@@ -26,7 +26,7 @@ export class ServiceCodeWayComponent implements OnDestroy, OnInit {
 
   constructor(private uploadService: UploadxService) {
     // restore background uploads
-    this.uploadService.queue.forEach(uploader => this.uploads.push(uploader));
+    this.uploads = this.uploadService.state();
   }
 
   ngOnInit(): void {

src/uploadx/lib/interfaces.ts

@@ -1,7 +1,5 @@
-import { Ajax } from './ajax';
 import { Canceler } from './canceler';
 import { RetryConfig } from './retry-handler';
-import { Uploader } from './uploader';
 
 export type Primitive = null | boolean | number | string;
 
@@ -130,12 +128,3 @@ export interface UploaderOptions extends UploadItem {
    */
   authorize?: AuthorizeRequest;
 }
-
-export type UploaderClass = new (
-  file: File,
-  options: UploaderOptions,
-  stateChange: (evt: UploadState) => void,
-  ajax: Ajax
-) => Uploader;
-
-export type Writable<T> = { -readonly [K in keyof T]: T[K] };

src/uploadx/lib/options.ts

@@ -1,5 +1,7 @@
 import { InjectionToken } from '@angular/core';
-import { AuthorizeRequest, UploaderClass, UploaderOptions } from './interfaces';
+import { Ajax } from './ajax';
+import { AuthorizeRequest, UploaderOptions } from './interfaces';
+import { Uploader } from './uploader';
 import { UploaderX } from './uploaderx';
 
 /**
@@ -46,6 +48,13 @@ export interface UploadxFactoryOptions extends UploadxOptions {
   storeIncompleteHours: number;
 }
 
+export type UploaderClass = new (
+  file: File,
+  options: UploaderOptions,
+  stateChange: (uploader: Uploader) => void,
+  ajax: Ajax
+) => Uploader;
+
 const defaultOptions: UploadxFactoryOptions = {
   endpoint: '/upload',
   autoUpload: true,

src/uploadx/lib/uploader.ts

@@ -63,7 +63,7 @@ export abstract class Uploader implements UploadState {
   constructor(
     readonly file: File,
     readonly options: Readonly<UploaderOptions>,
-    readonly stateChange: (evt: UploadState) => void,
+    readonly stateChange: (uploader: Uploader) => void,
     readonly ajax: Ajax
   ) {
     this.retry = new RetryHandler(options.retryConfig);

src/uploadx/lib/uploadx.service.ts

@@ -1,10 +1,9 @@
-import { Inject, Injectable, NgZone, Optional } from '@angular/core';
-import { OnDestroy } from '@angular/core';
+import { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core';
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs';
-import { debounceTime, map, startWith } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 import { Ajax, AjaxRequestConfig, AjaxResponse, UPLOADX_AJAX } from './ajax';
 import { IdService } from './id.service';
-import { UploadState, UploadxControlEvent, Writable } from './interfaces';
+import { UploadState, UploadxControlEvent } from './interfaces';
 import {
   iOSPatch,
   UploadxFactoryOptions,
@@ -14,9 +13,9 @@ import {
 } from './options';
 import { store } from './store';
 import { Uploader } from './uploader';
-import { isIOS, pick } from './utils';
+import { isIOS, onLine, pick } from './utils';
 
-const stateKeys: (keyof UploadState)[] = [
+export const UPLOAD_STATE_KEYS: (keyof UploadState)[] = [
   'file',
   'name',
   'progress',
@@ -79,7 +78,6 @@ export class UploadxService implements OnDestroy {
    */
   connect(options?: UploadxOptions): Observable<Uploader[]> {
     return this.init(options).pipe(
-      startWith(null),
       map(() => this.queue),
       debounceTime(DUE_TIME)
     );
@@ -93,6 +91,16 @@ export class UploadxService implements OnDestroy {
     this.queue = [];
   }
 
+  /**
+   * Returns current uploads state
+   * @example
+   * // restore background uploads
+   * this.uploads = this.uploadService.state();
+   */
+  state(): UploadState[] {
+    return this.queue.map(uploader => pick(uploader, UPLOAD_STATE_KEYS));
+  }
+
   ngOnDestroy(): void {
     this.disconnect();
     this.subs.forEach(sub => sub.unsubscribe());
@@ -143,16 +151,17 @@ export class UploadxService implements OnDestroy {
     return this.ajax.request(config);
   }
 
-  private stateChange = (evt: UploadState) => {
-    this.ngZone.run(() => this.eventsStream.next(pick(evt, stateKeys)));
-    if (evt.status !== 'uploading' && evt.status !== 'added') {
+  private stateChange = (uploader: Uploader) => {
+    this.ngZone.run(() => this.eventsStream.next(pick(uploader, UPLOAD_STATE_KEYS)));
+    if (uploader.status !== 'uploading' && uploader.status !== 'added') {
       this.ngZone.runOutsideAngular(() => setTimeout(() => this.processQueue()));
     }
   };
 
   private async addUploaderInstance(file: File, options: UploadxFactoryOptions): Promise<void> {
     const uploader = new options.uploaderClass(file, options, this.stateChange, this.ajax);
-    (uploader.uploadId as Writable<string>) = await this.idService.generateId(uploader);
+    (uploader as { uploadId: string }).uploadId = await this.idService.generateId(uploader);
+    // Object.defineProperty(uploader, 'uploadId', { configurable: false, writable: false });
     this.queue.push(uploader);
     uploader.status = options.autoUpload && onLine() ? 'queue' : 'added';
   }
@@ -165,7 +174,3 @@ export class UploadxService implements OnDestroy {
       .forEach(uploader => uploader.upload());
   }
 }
-
-function onLine(): boolean {
-  return typeof window !== 'undefined' ? window.navigator.onLine : true;
-}

src/uploadx/lib/utils.ts

@@ -23,9 +23,9 @@ export function unfunc<T, V>(value: T | ((ref: V) => T), ref: V): T {
   return value instanceof Function ? value(ref) : value;
 }
 
-export const pick = <T, K extends keyof T>(obj: T, whitelist: K[]): Pick<T, K> => {
+export const pick = <T, K extends keyof T>(obj: T, props: K[]): Pick<T, K> => {
   const result = {} as Pick<T, K>;
-  whitelist.forEach(key => (result[key] = obj[key]));
+  props.forEach(key => (result[key] = obj[key]));
   return result;
 };
 
@@ -84,3 +84,7 @@ export function isIOS(): boolean {
         /MacIntel/.test(navigator.platform)
       );
 }
+
+export function onLine(): boolean {
+  return typeof window !== 'undefined' ? window.navigator.onLine : true;
+}

tsconfig.json

@@ -4,6 +4,9 @@
     "importHelpers": true,
     "module": "es2020",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": false,
+    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",