feat: prerequest option (#246)

* feat: prerequest option * fix: types * chore: app update * refactor: allow void prerequest function * test: add prerequest test * docs: add prerequest * fix: extend prerequest type
kukhariev · Jul 16, 2020 · 0b47315 · 0b47315
1 parent 435cb7a
commit 0b47315
Show file tree

Hide file tree

Showing 20 changed files with 232 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -81,6 +81,8 @@ export class AppHomeComponent {
 
 - `metadata`: Custom uploads metadata
 
+- `prerequest`: Function called before every request
+
 - `uploaderClass`: Upload API implementation. Built-in: `Uploaderx`(default), `Tus`. More [examples](uploader-examples).
 
 - `token`: Authorization token as a `string` or function returning a `string` or `Promise<string>`

diff --git a/integrations/ng10/src/app/directive-way/directive-way.component.ts b/integrations/ng10/src/app/directive-way/directive-way.component.ts
@@ -39,7 +39,7 @@ export class DirectiveWayComponent implements OnDestroy {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((evt: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(evt => {
       const target = this.uploads.find(f => f.uploadId === evt.uploadId);
       if (target) {
         target.progress = evt.progress;

diff --git a/integrations/ng10/src/app/on-push/on-push.component.ts b/integrations/ng10/src/app/on-push/on-push.component.ts
@@ -1,5 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { Uploader, UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx';
+import {
+  b64,
+  RequestParams,
+  Uploader,
+  UploaderX,
+  UploadState,
+  UploadxOptions,
+  UploadxService
+} from 'ngx-uploadx';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { AuthService } from '../auth.service';
@@ -14,6 +22,7 @@ export class OnPushComponent implements OnDestroy {
   uploads$: Observable<Uploader[]>;
   options: UploadxOptions = {
     endpoint: `${environment.api}/files?uploadType=uploadx`,
+    prerequest: injectDigestHeader,
     token: this.tokenGetter.bind(this)
   };
 
@@ -38,7 +47,35 @@ export class OnPushComponent implements OnDestroy {
     this.uploadService.control({ action: 'upload' });
   }
 
-  async tokenGetter(httpStatus: number): Promise<string> {
+  async tokenGetter(httpStatus?: number): Promise<string> {
     return httpStatus === 401 ? await this.auth.renewToken().toPromise() : this.auth.accessToken;
   }
 }
+
+const hasher = {
+  isSupported: window.crypto && !!window.crypto.subtle,
+  async sha(data: ArrayBuffer): Promise<string> {
+    return this.hex(await crypto.subtle.digest('SHA-1', data));
+  },
+  getDigest(body: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async () => resolve(await this.sha(reader.result as ArrayBuffer));
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(body);
+    });
+  },
+  hex(buffer: ArrayBuffer): string {
+    return [...new Uint8Array(buffer)].map(b => b.toString(16).padStart(2, '0')).join('');
+  }
+};
+
+async function injectDigestHeader(this: UploaderX, req: RequestParams): Promise<RequestParams> {
+  if (hasher.isSupported && req.method === 'PUT' && req.body instanceof Blob) {
+    const headers = req.headers || {};
+    const sha = await hasher.getDigest(req.body);
+    headers.Digest = 'sha=' + b64.encode(sha);
+    console.log(sha, headers.Digest);
+  }
+  return req;
+}
diff --git a/integrations/ng10/src/app/service-code-way/service-code-way.component.ts b/integrations/ng10/src/app/service-code-way/service-code-way.component.ts
@@ -63,7 +63,7 @@ export class ServiceCodeWayComponent implements OnDestroy, OnInit {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((ufile: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(ufile => {
       const target = this.uploads.find(f => f.uploadId === ufile.uploadId);
       target ? Object.assign(target, ufile) : this.uploads.push(new Ufile(ufile));
     });

diff --git a/integrations/ng10/src/app/service-code-way/uploader-ext.class.ts b/integrations/ng10/src/app/service-code-way/uploader-ext.class.ts
@@ -1,9 +1,6 @@
 import { UploaderX } from 'ngx-uploadx';
 
 export class UploaderExt extends UploaderX {
-  // Disable delete files on cancel
-  onCancel(): void {}
-
   // override auth scheme
   setAuth(encoded: string): void {
     this.headers.Authorization = `Basic ${encoded}`;

diff --git a/integrations/ng8/src/app/directive-way/directive-way.component.ts b/integrations/ng8/src/app/directive-way/directive-way.component.ts
@@ -39,7 +39,7 @@ export class DirectiveWayComponent implements OnDestroy {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((evt: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(evt => {
       const target = this.uploads.find(f => f.uploadId === evt.uploadId);
       if (target) {
         target.progress = evt.progress;

diff --git a/integrations/ng8/src/app/on-push/on-push.component.ts b/integrations/ng8/src/app/on-push/on-push.component.ts
@@ -1,5 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { Uploader, UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx';
+import {
+  b64,
+  RequestParams,
+  Uploader,
+  UploaderX,
+  UploadState,
+  UploadxOptions,
+  UploadxService
+} from 'ngx-uploadx';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { AuthService } from '../auth.service';
@@ -14,6 +22,7 @@ export class OnPushComponent implements OnDestroy {
   uploads$: Observable<Uploader[]>;
   options: UploadxOptions = {
     endpoint: `${environment.api}/files?uploadType=uploadx`,
+    prerequest: injectDigestHeader,
     token: this.tokenGetter.bind(this)
   };
 
@@ -38,7 +47,35 @@ export class OnPushComponent implements OnDestroy {
     this.uploadService.control({ action: 'upload' });
   }
 
-  async tokenGetter(httpStatus: number): Promise<string> {
+  async tokenGetter(httpStatus?: number): Promise<string> {
     return httpStatus === 401 ? await this.auth.renewToken().toPromise() : this.auth.accessToken;
   }
 }
+
+const hasher = {
+  isSupported: window.crypto && !!window.crypto.subtle,
+  async sha(data: ArrayBuffer): Promise<string> {
+    return this.hex(await crypto.subtle.digest('SHA-1', data));
+  },
+  getDigest(body: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async () => resolve(await this.sha(reader.result as ArrayBuffer));
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(body);
+    });
+  },
+  hex(buffer: ArrayBuffer): string {
+    return [...new Uint8Array(buffer)].map(b => b.toString(16).padStart(2, '0')).join('');
+  }
+};
+
+async function injectDigestHeader(this: UploaderX, req: RequestParams): Promise<RequestParams> {
+  if (hasher.isSupported && req.method === 'PUT' && req.body instanceof Blob) {
+    const headers = req.headers || {};
+    const sha = await hasher.getDigest(req.body);
+    headers.Digest = 'sha=' + b64.encode(sha);
+    console.log(sha, headers.Digest);
+  }
+  return req;
+}
diff --git a/integrations/ng8/src/app/service-code-way/service-code-way.component.ts b/integrations/ng8/src/app/service-code-way/service-code-way.component.ts
@@ -63,7 +63,7 @@ export class ServiceCodeWayComponent implements OnDestroy, OnInit {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((ufile: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(ufile => {
       const target = this.uploads.find(f => f.uploadId === ufile.uploadId);
       target ? Object.assign(target, ufile) : this.uploads.push(new Ufile(ufile));
     });

diff --git a/integrations/ng8/src/app/service-code-way/uploader-ext.class.ts b/integrations/ng8/src/app/service-code-way/uploader-ext.class.ts
@@ -1,9 +1,6 @@
 import { UploaderX } from 'ngx-uploadx';
 
 export class UploaderExt extends UploaderX {
-  // Disable delete files on cancel
-  onCancel(): void {}
-
   // override auth scheme
   setAuth(encoded: string): void {
     this.headers.Authorization = `Basic ${encoded}`;

diff --git a/src/app/directive-way/directive-way.component.ts b/src/app/directive-way/directive-way.component.ts
@@ -39,7 +39,7 @@ export class DirectiveWayComponent implements OnDestroy {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((evt: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(evt => {
       const target = this.uploads.find(f => f.uploadId === evt.uploadId);
       if (target) {
         target.progress = evt.progress;

diff --git a/src/app/multi-service/multi-service.component.spec.ts b/src/app/multi-service/multi-service.component.spec.ts
@@ -1,6 +1,5 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MultiServiceComponent } from './multi-service.component';
 
 describe('MultiServiceComponent', () => {

diff --git a/src/app/on-push/on-push.component.ts b/src/app/on-push/on-push.component.ts
@@ -1,5 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { Uploader, UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx';
+import {
+  b64,
+  RequestParams,
+  Uploader,
+  UploaderX,
+  UploadState,
+  UploadxOptions,
+  UploadxService
+} from 'ngx-uploadx';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { AuthService } from '../auth.service';
@@ -14,6 +22,7 @@ export class OnPushComponent implements OnDestroy {
   uploads$: Observable<Uploader[]>;
   options: UploadxOptions = {
     endpoint: `${environment.api}/files?uploadType=uploadx`,
+    prerequest: injectDigestHeader,
     token: this.tokenGetter.bind(this)
   };
 
@@ -38,7 +47,35 @@ export class OnPushComponent implements OnDestroy {
     this.uploadService.control({ action: 'upload' });
   }
 
-  async tokenGetter(httpStatus: number): Promise<string> {
+  async tokenGetter(httpStatus?: number): Promise<string> {
     return httpStatus === 401 ? await this.auth.renewToken().toPromise() : this.auth.accessToken;
   }
 }
+
+const hasher = {
+  isSupported: window.crypto && !!window.crypto.subtle,
+  async sha(data: ArrayBuffer): Promise<string> {
+    return this.hex(await crypto.subtle.digest('SHA-1', data));
+  },
+  getDigest(body: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async () => resolve(await this.sha(reader.result as ArrayBuffer));
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(body);
+    });
+  },
+  hex(buffer: ArrayBuffer): string {
+    return [...new Uint8Array(buffer)].map(b => b.toString(16).padStart(2, '0')).join('');
+  }
+};
+
+async function injectDigestHeader(this: UploaderX, req: RequestParams): Promise<RequestParams> {
+  if (hasher.isSupported && req.method === 'PUT' && req.body instanceof Blob) {
+    const headers = req.headers || {};
+    const sha = await hasher.getDigest(req.body);
+    headers.Digest = 'sha=' + b64.encode(sha);
+    console.log(sha, headers.Digest);
+  }
+  return req;
+}
diff --git a/src/app/service-code-way/service-code-way.component.ts b/src/app/service-code-way/service-code-way.component.ts
@@ -63,7 +63,7 @@ export class ServiceCodeWayComponent implements OnDestroy, OnInit {
 
   onUpload(events$: Observable<UploadState>): void {
     this.state$ = events$;
-    events$.pipe(takeUntil(this.unsubscribe$)).subscribe((ufile: UploadState) => {
+    events$.pipe(takeUntil(this.unsubscribe$)).subscribe(ufile => {
       const target = this.uploads.find(f => f.uploadId === ufile.uploadId);
       target ? Object.assign(target, ufile) : this.uploads.push(new Ufile(ufile));
     });

diff --git a/src/app/service-code-way/uploader-ext.class.ts b/src/app/service-code-way/uploader-ext.class.ts
@@ -1,9 +1,6 @@
 import { UploaderX } from 'ngx-uploadx';
 
 export class UploaderExt extends UploaderX {
-  // Disable delete files on cancel
-  onCancel(): void {}
-
   // override auth scheme
   setAuth(encoded: string): void {
     this.headers.Authorization = `Basic ${encoded}`;

diff --git a/src/uploadx/lib/interfaces.ts b/src/uploadx/lib/interfaces.ts
@@ -85,6 +85,10 @@ export interface UploaderOptions extends UploadItem {
   chunkSize?: number;
   withCredentials?: boolean;
   readonly stateChange?: (evt: UploadEvent) => void;
+  /**
+   * Function called before every request
+   */
+  prerequest?: (req: RequestParams) => Promise<RequestParams> | RequestParams | void;
 }
 
 /**
@@ -116,3 +120,11 @@ export interface UploadxOptions extends UploaderOptions {
    */
   multiple?: boolean;
 }
+
+export interface RequestParams {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';
+  body?: BodyInit | null;
+  url?: string;
+  headers?: Record<string, string>;
+  progress?: boolean;
+}
diff --git a/src/uploadx/lib/store.ts b/src/uploadx/lib/store.ts
@@ -1,11 +1,11 @@
 class Store {
-  constructor(public prefix = 'UPLOADX-V3.0-') {}
+  prefix = 'UPLOADX-V3.0-';
 
   set(key: string, value: string): void {
     localStorage.setItem(this.prefix + key, value);
   }
 
-  get(key: string): string | null | false {
+  get(key: string): string | null {
     return localStorage.getItem(this.prefix + key);
   }
 

diff --git a/src/uploadx/lib/uploader.spec.ts b/src/uploadx/lib/uploader.spec.ts
@@ -1,3 +1,4 @@
+// noinspection ES6PreferShortImport
 import { ErrorHandler } from './error-handler';
 import { Uploader } from './uploader';
 
@@ -176,3 +177,27 @@ describe('start()', () => {
     expect(uploader.status).toEqual('complete');
   });
 });
+describe('prerequest', () => {
+  let uploader: MockUploader;
+  const injected = { headers: { Auth: 'token' } };
+  it('sync', async () => {
+    uploader = new MockUploader(file, { prerequest: req => ({ ...req, ...injected }) });
+    const _request = spyOn<any>(uploader, '_request').and.callThrough();
+    await uploader.request({ method: 'POST' });
+    expect(_request).toHaveBeenCalledWith({ method: 'POST', headers: { Auth: 'token' } });
+  });
+  it('async', async () => {
+    uploader = new MockUploader(file, {
+      prerequest: req => Promise.resolve({ ...req, ...injected })
+    });
+    const _request = spyOn<any>(uploader, '_request').and.callThrough();
+    await uploader.request({ method: 'POST' });
+    expect(_request).toHaveBeenCalledWith({ method: 'POST', headers: { Auth: 'token' } });
+  });
+  it('void', async () => {
+    uploader = new MockUploader(file, { prerequest: (() => {}) as any });
+    const _request = spyOn<any>(uploader, '_request').and.callThrough();
+    await uploader.request({ method: 'POST' });
+    expect(_request).toHaveBeenCalledWith({ method: 'POST' });
+  });
+});