feat(bump): added strict mode, doesn't build in dist, should be resolved

angular.json

@@ -10,13 +10,16 @@
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
+          "outputs": [
+            "./dist/ng2-file-upload"
+          ],
           "options": {
-            "tsConfig": "src/tsconfig.json",
+            "tsConfig": "src/tsconfig.lib.json",
             "project": "src/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "src/tsconfig.prod.json"
+              "tsConfig": "src/tsconfig.lib.prod.json"
             }
           }
         }

demo/src/index.html

@@ -12,7 +12,7 @@
   <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
 
   <!--link to bootstrap.css-->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/prettify-angulario.css">
   <style media="screen">

demo/src/tsconfig.json

@@ -21,5 +21,10 @@
   ],
   "exclude": [
     "**/*.spec.ts"
-  ]
+  ],
+  "paths": {
+    "@ng2-file-upload": [
+      "../../dist/ng2-file-upload/index.ts"
+    ]
+  }
 }

package.json

@@ -104,7 +104,7 @@
     "tslint": "^6.1.0",
     "tslint-config-valorsoft": "^2.2.1",
     "typedoc": "0.20.36",
-    "typescript": "~4.1.5",
+    "typescript": "4.1.5",
     "wallaby-webpack": "^3.9.16",
     "webdriver-manager": "12.1.8",
     "zone.js": "~0.11.3"

scripts/polyfills.ts

@@ -1,21 +1,5 @@
 // This file includes polyfills needed by Angular 2 and is loaded before
 // the app. You can add your own extra polyfills to this file.
 import 'ts-helpers';
-import 'core-js/es/symbol';
-import 'core-js/es/object';
-import 'core-js/es/function';
-import 'core-js/es/parse-int';
-import 'core-js/es/parse-float';
-import 'core-js/es/number';
-import 'core-js/es/math';
-import 'core-js/es/string';
-import 'core-js/es/date';
-import 'core-js/es/array';
-import 'core-js/es/regexp';
-import 'core-js/es/map';
-import 'core-js/es/set';
-import 'core-js/es/reflect';
-
-import 'core-js/es/reflect';
 import 'zone.js/dist/zone';
 import 'classlist-polyfill';

src/file-upload/file-drop.directive.ts

@@ -4,7 +4,7 @@ import { FileUploader, FileUploaderOptions } from './file-uploader.class';
 
 @Directive({ selector: '[ng2FileDrop]' })
 export class FileDropDirective {
-  @Input() public uploader: FileUploader;
+  @Input() public uploader?: FileUploader;
   @Output() public fileOver: EventEmitter<any> = new EventEmitter();
   @Output() public onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>();
 
@@ -14,8 +14,8 @@ export class FileDropDirective {
     this.element = element;
   }
 
-  public getOptions(): FileUploaderOptions {
+  public getOptions(): FileUploaderOptions | void {
-    return this.uploader.options;
+    return this.uploader?.options;
   }
 
   public getFilters(): any {
@@ -32,7 +32,9 @@ export class FileDropDirective {
     let options = this.getOptions();
     let filters = this.getFilters();
     this._preventAndStop(event);
-    this.uploader.addToQueue(transfer.files, options, filters);
+    if (options) {
+      this.uploader?.addToQueue(transfer.files, options, filters);
+    }
     this.fileOver.emit(false);
     this.onFileDrop.emit(transfer.files);
   }

src/file-upload/file-item.class.ts

@@ -4,9 +4,9 @@ import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file
 export class FileItem {
   public file: FileLikeObject;
   public _file: File;
-  public alias: string;
+  public alias?: string;
-  public url: string = '/';
+  public url? = '/';
-  public method: string;
+  public method?: string;
   public headers: any = [];
   public withCredentials: boolean = true;
   public formData: any = [];
@@ -17,8 +17,8 @@ export class FileItem {
   public isCancel: boolean = false;
   public isError: boolean = false;
   public progress: number = 0;
-  public index: number = void 0;
+  public index?: number;
-  public _xhr: XMLHttpRequest;
+  public _xhr?: XMLHttpRequest;
   public _form: any;
 
   protected uploader: FileUploader;
@@ -111,7 +111,7 @@ export class FileItem {
     this.isCancel = false;
     this.isError = false;
     this.progress = 100;
-    this.index = void 0;
+    this.index = undefined;
     this.onSuccess(response, status, headers);
   }
 
@@ -123,7 +123,7 @@ export class FileItem {
     this.isCancel = false;
     this.isError = true;
     this.progress = 0;
-    this.index = void 0;
+    this.index = undefined;
     this.onError(response, status, headers);
   }
 
@@ -135,7 +135,7 @@ export class FileItem {
     this.isCancel = true;
     this.isError = false;
     this.progress = 0;
-    this.index = void 0;
+    this.index = undefined;
     this.onCancel(response, status, headers);
   }
 

src/file-upload/file-like-object.class.ts

@@ -5,8 +5,8 @@ function isElement(node: any): boolean {
 export class FileLikeObject {
   public lastModifiedDate: any;
   public size: any;
-  public type: string;
+  public type?: string;
-  public name: string;
+  public name?: string;
   public rawFile: string;
 
   public constructor(fileOrInput: any) {

src/file-upload/file-select.directive.ts

@@ -1,10 +1,10 @@
 import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from '@angular/core';
 
-import { FileUploader } from './file-uploader.class';
+import {FileUploader, FileUploaderOptions} from './file-uploader.class';
 
 @Directive({ selector: '[ng2FileSelect]' })
 export class FileSelectDirective {
-  @Input() public uploader: FileUploader;
+  @Input() public uploader?: FileUploader;
   @Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
 
   protected element: ElementRef;
@@ -13,8 +13,8 @@ export class FileSelectDirective {
     this.element = element;
   }
 
-  public getOptions(): any {
+  public getOptions(): FileUploaderOptions | void {
-    return this.uploader.options;
+    return this.uploader?.options;
   }
 
   public getFilters(): any {
@@ -30,10 +30,11 @@ export class FileSelectDirective {
     let files = this.element.nativeElement.files;
     let options = this.getOptions();
     let filters = this.getFilters();
+    if (options) {
+      this.uploader?.addToQueue(files, options, filters);
+    }
 
-    this.uploader.addToQueue(files, options, filters);
     this.onFileSelected.emit(files);
-
     if (this.isEmptyAfterSelection()) {
       this.element.nativeElement.value = '';
     }

src/file-upload/file-type.class.ts

@@ -62,26 +62,26 @@ export class FileType {
 
   public static getMimeClass(file: FileLikeObject): string {
     let mimeClass = 'application';
-    if (this.mime_psd.indexOf(file.type) !== -1) {
+    if (file?.type && this.mime_psd.indexOf(file.type) !== -1) {
       mimeClass = 'image';
-    } else if (file.type.match('image.*')) {
+    } else if (file?.type?.match('image.*')) {
       mimeClass = 'image';
-    } else if (file.type.match('video.*')) {
+    } else if (file?.type?.match('video.*')) {
       mimeClass = 'video';
-    } else if (file.type.match('audio.*')) {
+    } else if (file?.type?.match('audio.*')) {
       mimeClass = 'audio';
-    } else if (file.type === 'application/pdf') {
+    } else if (file?.type === 'application/pdf') {
       mimeClass = 'pdf';
-    } else if (this.mime_compress.indexOf(file.type) !== -1) {
+    } else if (file?.type && this.mime_compress.indexOf(file.type) !== -1) {
       mimeClass = 'compress';
-    } else if (this.mime_doc.indexOf(file.type) !== -1) {
+    } else if (file?.type && this.mime_doc.indexOf(file.type) !== -1) {
       mimeClass = 'doc';
-    } else if (this.mime_xsl.indexOf(file.type) !== -1) {
+    } else if (file?.type && this.mime_xsl.indexOf(file.type) !== -1) {
       mimeClass = 'xls';
-    } else if (this.mime_ppt.indexOf(file.type) !== -1) {
+    } else if (file?.type && this.mime_ppt.indexOf(file.type) !== -1) {
       mimeClass = 'ppt';
     }
-    if (mimeClass === 'application') {
+    if (mimeClass === 'application' && file?.name) {
       mimeClass = this.fileTypeDetection(file.name);
     }
 

src/file-upload/file-uploader.class.ts

@@ -16,7 +16,7 @@ export type ParsedResponseHeaders = { [ headerFieldName: string ]: string };
 
 export type FilterFunction = {
   name: string,
-  fn: (item?: FileLikeObject, options?: FileUploaderOptions) => boolean
+  fn: (item: FileLikeObject, options?: FileUploaderOptions) => boolean
 };
 
 export interface FileUploaderOptions {
@@ -43,13 +43,13 @@ export interface FileUploaderOptions {
 
 export class FileUploader {
 
-  public authToken: string;
+  public authToken?: string;
   public isUploading: boolean = false;
   public queue: FileItem[] = [];
   public progress: number = 0;
   public _nextIndex: number = 0;
   public autoUpload: any;
-  public authTokenHeader: string;
+  public authTokenHeader?: string;
   public response: EventEmitter<any>;
 
   public options: FileUploaderOptions = {
@@ -62,7 +62,7 @@ export class FileUploader {
     formatDataFunctionIsAsync: false
   };
 
-  protected _failFilterIndex: number;
+  protected _failFilterIndex?: number;
 
   public constructor(options: FileUploaderOptions) {
     this.setOptions(options);
@@ -75,18 +75,18 @@ export class FileUploader {
     this.authToken = this.options.authToken;
     this.authTokenHeader = this.options.authTokenHeader || 'Authorization';
     this.autoUpload = this.options.autoUpload;
-    this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
+    this.options.filters?.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
 
-    if (this.options.maxFileSize) {
+    if (this.options.maxFileSize && this.options.filters) {
       this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
     }
 
     if (this.options.allowedFileType) {
-      this.options.filters.unshift({ name: 'fileType', fn: this._fileTypeFilter });
+      this.options.filters?.unshift({ name: 'fileType', fn: this._fileTypeFilter });
     }
 
     if (this.options.allowedMimeType) {
-      this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
+      this.options.filters?.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
     }
 
     for (let i = 0; i < this.queue.length; i++) {
@@ -114,8 +114,10 @@ export class FileUploader {
         this.queue.push(fileItem);
         this._onAfterAddingFile(fileItem);
       } else {
-        let filter = arrayOfFilters[ this._failFilterIndex ];
+        if (this._failFilterIndex) {
-        this._onWhenAddingFileFailed(temp, filter, options);
+          let filter = arrayOfFilters[ this._failFilterIndex ];
+          this._onWhenAddingFileFailed(temp, filter, options);
+        }
       }
     });
     if (this.queue.length !== count) {
@@ -255,7 +257,7 @@ export class FileUploader {
   }
 
   public _mimeTypeFilter(item: FileLikeObject): boolean {
-    return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1);
+    return !(item?.type && this.options.allowedMimeType && this.options.allowedMimeType?.indexOf(item.type) === -1);
   }
 
   public _fileSizeFilter(item: FileLikeObject): boolean {
@@ -307,29 +309,33 @@ export class FileUploader {
     if (!this.options.disableMultipart) {
       sendable = new FormData();
       this._onBuildItemForm(item, sendable);
-
+      let appendFile;
-      const appendFile = () => sendable.append(item.alias, item._file, item.file.name);
+      if (item.alias && item._file && item.file.name) {
-      if (!this.options.parametersBeforeFiles) {
+        appendFile = () => sendable.append(item.alias, item._file, item.file.name);
-        appendFile();
+        if (!this.options.parametersBeforeFiles) {
+          appendFile();
+        }
       }
 
       // For AWS, Additional Parameters must come BEFORE Files
       if (this.options.additionalParameter !== undefined) {
         Object.keys(this.options.additionalParameter).forEach((key: string) => {
-          let paramVal = this.options.additionalParameter[ key ];
+          let paramVal = this.options.additionalParameter?.[ key ];
           // Allow an additional parameter to include the filename
-          if (typeof paramVal === 'string' && paramVal.indexOf('{{file_name}}') >= 0) {
+          if (typeof paramVal === 'string' && paramVal.indexOf('{{file_name}}') >= 0 && item.file?.name) {
             paramVal = paramVal.replace('{{file_name}}', item.file.name);
           }
           sendable.append(key, paramVal);
         });
       }
 
-      if (this.options.parametersBeforeFiles) {
+      if (appendFile && this.options.parametersBeforeFiles) {
         appendFile();
       }
     } else {
-      sendable = this.options.formatDataFunction(item);
+      if (this.options.formatDataFunction) {
+        sendable = this.options.formatDataFunction(item);
+      }
     }
 
     xhr.upload.onprogress = (event: any) => {
@@ -356,7 +362,9 @@ export class FileUploader {
       this._onCancelItem(item, response, xhr.status, headers);
       this._onCompleteItem(item, response, xhr.status, headers);
     };
-    xhr.open(item.method, item.url, true);
+    if (item.method && item.url) {
+      xhr.open(item.method, item.url, true);
+    }
     xhr.withCredentials = item.withCredentials;
     if (this.options.headers) {
       for (let header of this.options.headers) {
@@ -368,7 +376,7 @@ export class FileUploader {
         xhr.setRequestHeader(header.name, header.value);
       }
     }
-    if (this.authToken) {
+    if (this.authToken && this.authTokenHeader) {
       xhr.setRequestHeader(this.authTokenHeader, this.authToken);
     }
     xhr.onreadystatechange = function () {
@@ -397,19 +405,19 @@ export class FileUploader {
     return Math.round(uploaded * ratio + current);
   }
 
-  protected _getFilters(filters: FilterFunction[] | string): FilterFunction[] {
+  protected _getFilters(filters?: FilterFunction[] | string): FilterFunction[] | [] {
     if (!filters) {
-      return this.options.filters;
+      return this.options?.filters || [];
     }
     if (Array.isArray(filters)) {
       return filters;
     }
     if (typeof filters === 'string') {
       let names = filters.match(/[^\s,]+/g);
-      return this.options.filters
+      return this.options?.filters || []
-        .filter((filter: any) => names.indexOf(filter.name) !== -1);
+        .filter((filter: any) => names?.indexOf(filter.name) !== -1);
     }
-    return this.options.filters;
+    return this.options?.filters || [];
   }
 
   protected _render(): any {
@@ -423,7 +431,9 @@ export class FileUploader {
   protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean {
     this._failFilterIndex = -1;
     return !filters.length ? true : filters.every((filter: FilterFunction) => {
-      this._failFilterIndex++;
+      if (typeof this._failFilterIndex === 'number') {
+        this._failFilterIndex++;
+      }
       return filter.fn.call(this, file, options);
     });
   }

src/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../dist/ng2-file-upload",
+  "dest": "../node_modules/ng2-file-upload",
   "lib": {
     "entryFile": "index.ts"
   }

src/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "../dist",
+    "outDir": "../dist/ng2-file-upload",
-    "target": "es5",
+    "target": "es2015",
     "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
@@ -15,13 +15,17 @@
     "stripInternal": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "lib": ["dom", "es6"]
+    "lib": ["dom", "es2018"],
+    "strict": true
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "skipTemplateCodegen": true,
-    "flatModuleOutFile": "ng2-file-upload.js",
+    "strictInjectionParameters": true,
+    "strictTemplates": false,
+    "fullTemplateTypeCheck": true,
+    "flatModuleOutFile": "ng2-file-upload.d.ts",
     "flatModuleId": "ng2-file-upload"
   },
   "include": [
@@ -29,5 +33,13 @@
   ],
   "exclude": [
     "**/*.spec.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.lib.prod.json"
+    }
   ]
 }

src/tsconfig.lib.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/ng2-file-upload",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

src/tsconfig.lib.prod.json

@@ -1,5 +1,6 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.lib.json",
   "compilerOptions": {
     "declarationMap": false
   },