Merge pull request #98 from r-hannuschka/development

2.1.0

.circleci/config.yml

@@ -100,7 +100,40 @@ jobs:
             - "4b:28:3e:14:3b:b1:bc:5b:48:17:14:61:6e:20:66:de"
       - run:
           name: "Deploy documentation to gh-pages"
-          command: gh-pages --dotfiles --message "update docs [skip ci]" --dist ./src/documentation --dest .
+          command: gh-pages --dotfiles --message "update docs [skip ci]" --dist ./src/documentation --dest documentation
+  build-demo:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/ngx-fileupload
+      - run:
+          name: "build demo page in prod mode"
+          command: |
+            cd src && npm run build -- --prod --base-href=/ngx-fileupload/
+      - persist_to_workspace:
+          root: ~/ngx-fileupload
+          paths:
+            - ./src/dist/ngx-fileupload-example
+  deploy-demo:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/ngx-fileupload
+      - run:
+          name: Avoid hosts unknown for github
+          command: mkdir -p ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
+      - run:
+          name: "install dependencies" 
+          command: |
+            sudo npm i -g --silent gh-pages@2.0.1
+            git config user.email "ci-build@ngx-fileupload.net"
+            git config user.name "ci-build:deploy"
+      - add_ssh_keys:
+          fingerprints:
+            - "4b:28:3e:14:3b:b1:bc:5b:48:17:14:61:6e:20:66:de"
+      - run:
+          name: "Deploy demo to gh-pages"
+          command: gh-pages --dotfiles --message "update demo page [skip ci]" --add --dist ./src/dist/ngx-fileupload-example
 
 workflows:
   version: 2.1
@@ -120,9 +153,17 @@ workflows:
           requires:
             - install
           filters: *filter_master
+      - build-demo:
+          requires:
+            - install
+          filters: *filter_master
       - deploy-docs:
           requires:
             - build-docs
+      - deploy-demo:
+          requires:
+            - build-demo
+            - deploy-docs
       - coverage:
           requires:
             - test

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 2.1.0
+
+### features
+
+- add demo page for more examples (customize / validators)
+- remove angular pipes dependecy and replace with internal fileSize pipe to show file size formatted
+- add output completed to ngx-fileupload-item to get notified upload for file has been completed
+- response errors now allways sanitized to be an array, remove toArray pipe
+
+### bugfixes
+
+- fixed bug all uploads stay alive even component gets destroyed
+- fixed bug could not add any files anymore after there are files in list
+- fixed style issues
+
+## 2.0.1
+
+- update dependencies
+
+## 2.0.0
+
+- reworking validation
+
+# Changelog
+
 ## 1.0.4
 
 ### dependencies

README.md

@@ -1,9 +1,7 @@
 # NgxFileupload
 
 [![npm](https://img.shields.io/npm/v/@r-hannuschka/ngx-fileupload.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@r-hannuschka/ngx-fileupload)
-[![CircleCI](https://circleci.com/gh/r-hannuschka/ngx-fileupload/tree/master.svg?style=svg)](https://circleci.com/gh/r-hannuschka/ngx-fileupload/tree/master)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/dc2f1a553c31471a95184d397bf72eb3)](https://www.codacy.com/app/r-hannuschka/ngx-fileupload?utm_source=github.com&utm_medium=referral&utm_content=r-hannuschka/ngx-fileupload&utm_campaign=Badge_Grade)
-[![codecov](https://codecov.io/gh/r-hannuschka/ngx-fileupload/branch/master/graph/badge.svg)](https://codecov.io/gh/r-hannuschka/ngx-fileupload)
 
 Angular 8+ async fileupload with progressbar
 
@@ -19,6 +17,10 @@ npm
 npm i --save @r-hannuschka/ngx-fileupload angular-pipes
 ```
 
+## Demo
+
+Watch [Demo](https://r-hannuschka.github.io/ngx-fileupload/#/) to see ngx fileupload in action, customizing views and add validations.
+
 ## Usage
 
 ```html
@@ -60,6 +62,13 @@ npm run e2e
 ng test ngx-fileupload
 ```
 
+## Roadmap
+
+- reimplement e2e tests
+- reimplement unit tests
+- better state management for uploads
+- add option to limit processing max uploads at once
+
 ## Credits
 
 Special thanks for code reviews, great improvements and ideas to

docs/upload-item.md

@@ -44,7 +44,9 @@ class UploadComponent {
 
 | name | type | description |
 |---|---|---|
-| changed | EventEmitter<UploadModel> | emits if upload state has been changed |
+| changed | EventEmitter:UploadModel | @deprecated emits if upload state has been changed |
+| completed | EventEmitter:FileUpload | emits if upload has been completed, this not includes file upload contains errors (ServerResponse Error) or invalidated |
+| stateChange | EventEmitter:FileUpload | emits if upload state has been changed |
 
 ## Custom Template
 
@@ -76,6 +78,7 @@ to fill our template with life there is a context to the template injected, cont
 
     <!-- add single action to upload a file -->
     <button (click)="ctrl.start()"></button>
+    <button (click)="ctrl.stop()"></button>
 </ng-template>
 
 <div class="fileupload list">
@@ -149,7 +152,7 @@ Since the component could load a custom template we have to provide some data /
     |---|---|
     | retry | if an uploads failed you could retry upload the file, unless it is simply invalid |
     | start | starts request to upload a file to server |
-    | cancel | cancel upload, if upload is allready running it will stopped |
+    | stop | cancel upload, this will set state of upload to canceled and trigger completed event |
 
 ## Further reading
 

src/angular.json

@@ -28,8 +28,15 @@
               "example/assets"
             ],
             "styles": [
+              "node_modules/bootstrap-scss/bootstrap.scss",
               "example/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "example/assets/scss",
+                "example/assets"
+              ]
+            },
             "scripts": []
           },
           "configurations": {

src/example/app/app.component.html

@@ -1 +1,5 @@
-<ngx-fileupload [@.disabled]="disableAnimations" [url]="'http://localhost:3000/upload'" [validator]="validator"></ngx-fileupload>
+<app-ui--header [menuItems]="menuItems"></app-ui--header>
+
+<main class="container">
+    <router-outlet></router-outlet>
+</main>

src/example/app/app.component.scss

@@ -1,11 +1,19 @@
+@import 'variables';
+
 :host {
 
-    ngx-fileupload {
-        height: 300px;
-        width: 480px;
-    }
+    ::ng-deep {
+        app-ui--header .navbar {
+            background-color: map-get($colors, black);
+            color: map-get($colors, text);
+
+            .nav-link {
+                color: map-get($colors, textDark);
+            }
 
-    .fileupload-drop {
-        background: plum;
+            .nav-link.route-link-active {
+                color: inherit;
+            }
+        }
     }
-}
+}

src/example/app/app.component.ts

@@ -1,30 +1,20 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { environment } from "../environments/environment";
-import { MaxUploadSizeValidator } from "./validators/max-size.validator";
-import { OnlyZipValidator } from "./validators/only-zip.validator";
-import { isImage } from "./validators/image.validator";
-import { Validator, ValidationBuilder } from "lib/public-api";
+import { MenuItem, MainMenuItems } from "@ngx-fileupload-example/data/base/data";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"]
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
     title = "ngx-fileupload";
 
     public disableAnimations = false;
 
-    public validator: Validator;
+    public menuItems: MenuItem[] = MainMenuItems;
 
     constructor() {
         this.disableAnimations = environment.disableAnimations || false;
     }
-
-    public ngOnInit() {
-        this.validator = ValidationBuilder.and(
-            ValidationBuilder.or(new OnlyZipValidator(), isImage),
-            new MaxUploadSizeValidator()
-        );
-    }
 }

src/example/app/app.module.ts

@@ -1,17 +1,63 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { HTTP_INTERCEPTORS } from "@angular/common/http";
+
+import { NgxFileUploadModule } from "@r-hannuschka/ngx-fileupload";
+import { IgxIconModule } from "igniteui-angular";
+import { HighlightModule } from "ngx-highlightjs";
+import xml from "highlight.js/lib/languages/xml";
+import scss from "highlight.js/lib/languages/scss";
+import typescript from "highlight.js/lib/languages/typescript";
+import javascript from "highlight.js/lib/languages/javascript";
+
+/**
+ * Import every language you wish to highlight here
+ * NOTE: The name of each language must match the file name its imported from
+ */
+export function hljsLanguages() {
+  return [
+    {name: "typescript", func: typescript},
+    {name: "javascript", func: javascript},
+    {name: "scss", func: scss},
+    {name: "xml", func: xml}
+  ];
+}
 
 import { AppComponent } from "./app.component";
-import { NgxFileUploadModule } from "lib/public-api";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+
+import { UiModule } from "@ngx-fileupload-example/ui";
+import { FakeUploadInterceptor } from "@ngx-fileupload-example/utils/http";
+import { CustomizePage } from "@ngx-fileupload-example/page/customize";
+import { Dashboard } from "@ngx-fileupload-example/page/dashboard";
+import { ValidationPage } from "@ngx-fileupload-example/page/validation";
 
-@NgModule( {
+@NgModule({
     declarations: [
         AppComponent
     ],
     imports: [
         BrowserModule,
-        NgxFileUploadModule
+        BrowserAnimationsModule,
+        NgxFileUploadModule,
+        RouterModule.forRoot([], {useHash: true}),
+        CustomizePage,
+        Dashboard,
+        ValidationPage,
+        UiModule,
+        IgxIconModule,
+        HighlightModule.forRoot({
+            languages: hljsLanguages
+        })
     ],
     bootstrap: [AppComponent],
-} )
+    providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: FakeUploadInterceptor,
+            multi: true
+        }
+    ]
+})
 export class AppModule { }