Merge pull request #711 from r-hannuschka/development

chore: 5.1.1

.github/workflows/ngx-file-upload-core.yml

@@ -24,7 +24,7 @@ jobs:
 
       - name: add @angular/cli global
         run: |
-          npm i -g @angular/cli@13.1.3
+          npm i -g @angular/cli@13.3.2
           ng --version
 
       - name: lint

.github/workflows/ngx-file-upload-ui.yml

@@ -25,7 +25,7 @@ jobs:
 
       - name: add @angular/cli global
         run: |
-          npm i -g @angular/cli@13.1.3
+          npm i -g @angular/cli@13.3.2
           ng --version
 
       - name: lint

docs/core/api.md

@@ -143,8 +143,10 @@ export interface UploadOptions {
          * namespace where to find
          */
         name?: string;
+        additionalData: Record<string, string>,
         /**
          * additional meta information for file upload as JSON
+         * @deprecated
          */
         metadata?: Record<string, unknown>;
     };

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-fileupload",
-  "version": "8.0.1",
+  "version": "8.1.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -24,60 +24,61 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "13.1.3",
-    "@angular/animations": "13.1.2",
-    "@angular/common": "13.1.2",
-    "@angular/compiler": "13.1.2",
-    "@angular/core": "13.1.2",
-    "@angular/forms": "13.1.2",
-    "@angular/platform-browser": "13.1.2",
-    "@angular/platform-browser-dynamic": "13.1.2",
-    "@angular/router": "13.1.2",
-    "@angular/cdk": "13.1.2",
+    "@angular-devkit/core": "13.3.8",
+    "@angular/animations": "13.3.11",
+    "@angular/cdk": "13.3.9",
+    "@angular/common": "13.3.11",
+    "@angular/compiler": "13.3.11",
+    "@angular/core": "13.3.11",
+    "@angular/forms": "13.3.11",
+    "@angular/platform-browser": "13.3.11",
+    "@angular/platform-browser-dynamic": "13.3.11",
+    "@angular/router": "13.3.11",
     "highlight.js": "11.4.0",
-    "igniteui-angular": "13.0.8",
+    "igniteui-angular": "13.2.3",
     "ngx-dropzone": "3.0.0",
     "ngx-file-drop": "13.0.0",
     "ngx-highlightjs": "6.1.1",
     "rxjs": "7.4.0",
     "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.1.3",
+    "@angular-devkit/build-angular": "13.3.8",
     "@angular-eslint/builder": "13.0.1",
     "@angular-eslint/eslint-plugin": "13.0.1",
     "@angular-eslint/eslint-plugin-template": "13.0.1",
     "@angular-eslint/schematics": "13.0.1",
     "@angular-eslint/template-parser": "13.0.1",
-    "@angular/cli": "13.1.3",
-    "@angular/compiler-cli": "13.1.2",
-    "@angular/language-service": "13.1.2",
-    "@types/jasmine": "3.10.3",
+    "@angular/cli": "13.3.8",
+    "@angular/compiler-cli": "13.3.10",
+    "@angular/language-service": "13.3.10",
+    "@types/jasmine": "3.10.5",
     "@types/jasminewd2": "2.0.10",
-    "@types/node": "16.11.21",
-    "@typescript-eslint/eslint-plugin": "5.10.0",
-    "@typescript-eslint/parser": "5.10.0",
+    "@types/node": "16.11.26",
+    "@typescript-eslint/eslint-plugin": "5.16.0",
+    "@typescript-eslint/parser": "5.16.0",
     "angular-cli-ghpages": "1.0.0",
     "bootstrap-scss": "5.1.3",
     "codelyzer": "6.0.2",
     "cors": "2.8.5",
     "eslint": "8.7.0",
-    "express": "4.17.2",
+    "express": "4.17.3",
     "express-fileupload": "1.2.1",
     "https-proxy-agent": "5.0.0",
     "jasmine-core": "4.0.0",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.3.16",
+    "karma": "6.3.17",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "2.1.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.7.0",
     "karma-mocha-reporter": "2.2.5",
     "letslog": "1.0.12",
     "ng-packagr": "13.1.3",
     "protractor": "7.0.0",
     "ts-node": "10.4.0",
-    "tsickle": "0.43.0",
+    "tsickle": "0.46.0",
     "tslint": "6.1.3",
     "typescript": "4.4.4",
     "watch": "1.0.2",

src/projects/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-file-upload/core",
-  "version": "5.0.1",
+  "version": "5.1.1",
   "description": "Angular 13 file upload core package for async file uploads in angular containing validation, upload queue and async uploading.",
   "repository": {
     "url": "https://github.com/r-hannuschka/ngx-fileupload/tree/master/src/projects/core",

src/projects/core/src/lib/api/src/upload.ts

@@ -172,9 +172,15 @@ export interface NgxFileUploadOptions {
          * in FormData
          */
         name?: string;
+        /**
+         * additional formdata which will send
+         */
+        additionalData?: Record<string, string>;
         /**
          * additional metadata which will append to formData, requires formData
          * to be enabled
+         * 
+         * @deprecated use additionalData instead
          */
         metadata?: Record<string, unknown>;
     };

src/projects/core/src/lib/upload/src/upload.request.ts

@@ -223,6 +223,13 @@ export class NgxFileUploadRequest implements INgxFileUploadRequest {
         formData.append(label, file.raw, file.name);
       })
 
+      const additionalData = formDataOptions.additionalData;
+      if (additionalData && Object.keys(additionalData).length > 0) {
+        for (let [key, value] of Object.entries(additionalData)) {
+          formData.append(key, value);
+        }
+      }
+
       if (formDataOptions.metadata) {
         formData.append('metadata', JSON.stringify(formDataOptions.metadata));
       }

src/projects/core/src/tests/upload/upload.request.spec.ts

@@ -309,6 +309,27 @@ describe("NgxFileUpload/libs/upload", () => {
         expect(metadataSend).toEqual({ 'mocked': 'request_data' })
     });
 
+    it("should send additional formdata", () => {
+        const request = new NgxFileUploadRequest(httpClient, createNgxFileUploadFile(), {
+            url,
+            formData: {
+                enabled: true,
+                additionalData: {
+                    'token': '12345',
+                    'name': 'mocked'
+                }
+            }
+        })
+
+        request.start();
+        const mockReq = httpMock.expectOne(url)
+        const token = mockReq.request.body.get('token');
+        const name = mockReq.request.body.get('name');
+
+        expect(token).toEqual('12345')
+        expect(name).toEqual('mocked')
+    });
+
     it("should remove invalid files", () => {
         const file1 = createNgxFileUploadFile()
         const file2 = createNgxFileUploadFile()

src/projects/example/assets/scss/_variables.scss

@@ -29,14 +29,3 @@ $colors : (
     black: #0D1F2D,
     red: #ED4337
 );
-
-$dark-tabs: igx-tabs-theme(
-    $item-text-color: map-get($colors, textDark),
-    $item-background: map-get($colors, darkBlue),
-    $item-hover-background: map-get($colors, blue),
-    $item-hover-color: #343a40,
-    $item-active-color: map-get($colors, text),
-    $item-active-icon-color: #FFF,
-    $indicator-color: #F8F8F8,
-    $tab-ripple-color: #F8F8F8
-);

src/projects/example/libs/pages/auto-upload/src/demo/demo.scss

@@ -3,10 +3,6 @@
 
 :host {
 
-    ::ng-deep {
-        @include igx-tabs($dark-tabs);
-    }
-
     .header {
 
         background: map-get($colors, darkBlue);

src/projects/example/libs/pages/customize/src/item-template/item-template.component.scss

@@ -3,10 +3,6 @@
 
 :host {
 
-    ::ng-deep {
-        @include igx-tabs($dark-tabs);
-    }
-
     .card-list {
         display: flex;
         flex-wrap: wrap;

src/projects/example/libs/pages/drop-zone/src/ui/drop-zone.scss

@@ -3,10 +3,6 @@
 
 :host {
 
-    ::ng-deep {
-        @include igx-tabs($dark-tabs);
-    }
-
     .files {
         height: 30vh;
         overflow-y: auto;

src/projects/example/libs/pages/drop-zone/src/ui/drop-zone.ts

@@ -27,9 +27,8 @@ export class DropZoneComponent implements OnDestroy, OnInit {
     formData: {
       enabled: true,
       name: "picture",
-      metadata: {
-        role: 'DEV_NULL',
-        parent: -1
+      additionalData: {
+        'token': 'foobar'
       }
     },
   };

src/projects/example/libs/pages/ngx-dropzone/src/ngx-dropzone-demo.scss

@@ -4,10 +4,6 @@
 
 :host {
 
-    ::ng-deep {
-        @include igx-tabs($dark-tabs);
-    }
-
     ngx-dropzone {
         border-style: solid;
         border-width: 0 2px 2px;

src/projects/example/libs/pages/validation/src/validation-page/validation-page.component.scss

@@ -2,7 +2,4 @@
 @import "variables";
 
 :host {
-    ::ng-deep {
-        @include igx-tabs($dark-tabs);
-    }
 }

src/projects/example/styles.scss

@@ -4,8 +4,6 @@ $ngx-fileupload-example--font-path: "./example/assets/fonts";
 @import '~highlight.js/styles/github.css';
 @import '~igniteui-angular/lib/core/styles/themes/index';
 @import './assets/scss/variables';
-@include igx-core();
-@include igx-theme($purple-palette);
 
 /* You can add global styles to this file, and also import other style files */
 body {
@@ -15,7 +13,3 @@ body {
 .error {
     color: map-get($colors, "red");
 }
-
-::ng-deep {
-    @include igx-tabs($dark-tabs);
-}

src/projects/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-file-upload/ui",
-  "version": "5.0.1",
+  "version": "5.1.1",
   "description": "Angular 13 file upload components for @ngx-file-upload/core",
   "repository": {
     "url": "https://github.com/r-hannuschka/ngx-fileupload/tree/master/src/projects/ui",