chore(release): 3.0.0

henishv · Apr 29, 2017 · f23a894 · f23a894
1 parent 5f44cc5
commit f23a894
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 101 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -18,7 +18,6 @@ let upload: multer.Instance = multer({ storage: storage });
 export let uploadRouter = express.Router();
 
 uploadRouter.post('/upload', upload.any(), (req: express.Request, res: express.Response) => {
-  console.log(req.body);
   rimraf.sync('uploads/**/*');
   res.status(200).json(req.files);
 });
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<app-home></app-home>
+
+<a href="https://github.com/jkuri/ngx-uploader"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 100;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,18 +1,15 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
-import { HttpModule } from '@angular/http';
-import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 import { NgUploaderModule } from '../ngx-uploader/module/ngx-uploader.module';
 import { AppComponent } from './app.component';
 import { AppHomeComponent } from './components/app-home';
 
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule.forRoot([
-      { path: '', component: AppHomeComponent, pathMatch: 'full' }
-    ]),
+    FormsModule,
     NgUploaderModule
   ],
   providers: [

diff --git a/src/app/components/app-home/app-home.component.html b/src/app/components/app-home/app-home.component.html
@@ -1,4 +1,9 @@
-<div class="hero is-fullheight">
+<div class="hero">
+  <div class="hero-head">
+    <div class="container has-text-centered">
+      <h1>ngx-uploader</h1>
+    </div>
+  </div>
   <div class="hero-body">
     <div class="container">
       <div class="columns is-multiline">
@@ -7,10 +12,29 @@
             <h1>Drag & Drop</h1>
             <label class="upload-button">
               <input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
-              or choose file
+              or choose file(s)
             </label>
           </div>
         </div>
+        <div class="column is-8 is-offset-2">
+          <div class="columns">
+            <div class="column is-12">
+              <label class="label">Concurrent Uploads</label>
+              <input class="input" type="text" name="concurrency" [(ngModel)]="formData.concurrency">
+              <label class="checkbox">
+                <input type="checkbox" name="autoUpload" [(ngModel)]="formData.autoUpload">
+                Auto Upload
+              </label>
+              <label class="checkbox">
+                <input type="checkbox" name="verbose" [(ngModel)]="formData.verbose">
+                Show Live Data
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="column is-8 is-offset-2" *ngIf="formData.verbose">
+          <p class="verbose-data">{{ files | json }}</p>
+        </div>
         <div class="column is-8 is-offset-2">
           <table class="table" *ngIf="files && files.length">
             <thead>
@@ -62,11 +86,4 @@ <h1>Drag & Drop</h1>
       </div>
     </div>
   </div>
-  <!--<div class="hero-foot">
-    <div class="container">
-      <div class="column is-8 is-offset-2">
-        <p class="log" *ngIf="files && files.length">{{ files | json }}</p>
-      </div>
-    </div>
-  </div>-->
 </div>
diff --git a/src/app/components/app-home/app-home.component.spec.ts b/src/app/components/app-home/app-home.component.spec.ts
diff --git a/src/app/components/app-home/app-home.component.ts b/src/app/components/app-home/app-home.component.ts
@@ -1,24 +1,51 @@
 import { Component, EventEmitter } from '@angular/core';
 import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from '../../../ngx-uploader/services/ngx-uploader';
 
+interface FormData {
+  concurrency: number;
+  autoUpload: boolean;
+  verbose: boolean;
+}
+
 @Component({
   selector: 'app-home',
   templateUrl: 'app-home.component.html'
 })
 export class AppHomeComponent {
+  formData: FormData;
   files: UploadFile[];
   uploadInput: EventEmitter<any>;
   humanizeBytes: Function;
 
+
   constructor() {
+    this.formData = {
+      concurrency: 0,
+      autoUpload: false,
+      verbose: false
+    };
+
     this.files = [];
     this.uploadInput = new EventEmitter<any>();
     this.humanizeBytes = humanizeBytes;
   }
 
   onUploadOutput(output: UploadOutput): void {
+    console.log(output);
+
     if (output.type === 'allAddedToQueue') {
-      // this.uploadInput.emit({ type: 'uploadAll', url: 'http://api.ngx-uploader.com', method: 'POST' });
+      if (this.formData.autoUpload) {
+        console.log('yes');
+        const event: UploadInput = {
+          type: 'uploadAll',
+          url: '/upload',
+          method: 'POST',
+          data: { foo: 'bar' },
+          concurrency: this.formData.concurrency
+        };
+
+        this.uploadInput.emit(event);
+      }
     } else if (output.type === 'addedToQueue') {
       this.files.push(output.file);
     } else if (output.type === 'uploading') {
@@ -27,24 +54,15 @@ export class AppHomeComponent {
     } else if (output.type === 'removed') {
       this.files = this.files.filter((file: UploadFile) => file !== output.file);
     }
-
-    console.log(output);
-
-
-    // if (output.type === 'files') {
-    //   this.uploadInput.emit({ type: 'uploadAll' });
-    // } else if (output.type === 'upload') {
-    //   console.log(output);
-    // }
   }
 
   startUpload(): void {
     const event: UploadInput = {
       type: 'uploadAll',
-      url: 'http://api.ngx-uploader.com',
+      url: '/upload',
       method: 'POST',
-      data: { foo: 'bla!' },
-      concurrency: 1
+      data: { foo: 'bar' },
+      concurrency: this.formData.concurrency
     }
 
     this.uploadInput.emit(event);

diff --git a/src/ngx-uploader/services/ngx-uploader.ts b/src/ngx-uploader/services/ngx-uploader.ts
@@ -47,7 +47,7 @@ export interface UploadInput {
   id?: string;
   fileIndex?: number;
   file?: UploadFile;
-  data?: { [key: string]: string | number };
+  data?: { [key: string]: string | Blob };
   headers?: { [key: string]: string };
   concurrency?: number;
 }
@@ -116,30 +116,20 @@ export class NgUploaderService {
           this.uploads.push({ file: event.file, sub: sub });
         break;
         case 'uploadAll':
-          const concurrency = event.concurrency || Number.NEGATIVE_INFINITY;
-
-          if (concurrency === Number.NEGATIVE_INFINITY) { // parallel
-            this.files.forEach(file => {
-              const subscription = this.uploadFile(file, event).subscribe(data => {
-                this.serviceEvents.emit(data);
-              });
-
-              this.uploads.push({ file: file, sub: subscription });
-            });
-          } else if (Number.isInteger(concurrency)) { // sequential
-            const subscriber = Subscriber.create((data: UploadOutput) => {
-              this.serviceEvents.emit(data);
-            });
-
-            this.uploads = this.uploads.concat(this.files.map(file => {
-              return { file: file, sub: null };
-            }));
-
-            const subscription = Observable.from(this.files.map(file => this.uploadFile(file, event)))
-              .mergeAll(concurrency)
-              .combineLatest(data => data)
-              .subscribe(subscriber);
-          }
+          let concurrency = event.concurrency > 0 ? event.concurrency : Number.POSITIVE_INFINITY;
+
+          const subscriber = Subscriber.create((data: UploadOutput) => {
+            this.serviceEvents.emit(data);
+          });
+
+          this.uploads = this.uploads.concat(this.files.map(file => {
+            return { file: file, sub: null };
+          }));
+
+          const subscription = Observable.from(this.files.map(file => this.uploadFile(file, event)))
+            .mergeAll(concurrency)
+            .combineLatest(data => data)
+            .subscribe(subscriber);
         break;
         case 'cancel':
           const id = event.id || null;
@@ -155,19 +145,13 @@ export class NgUploaderService {
 
             this.serviceEvents.emit({ type: 'cancelled', file: this.uploads[index].file });
             this.uploads[index].file.progress.status = UploadStatus.Canceled;
-            // this.uploads.splice(index, 1);
-            // this.fileList = [].filter.call(this.fileList, (file: File, i: number) => i !== index);
-            // this.files.splice(index, 1);
           }
         break;
         case 'cancelAll':
           this.uploads.forEach(upload => {
-            upload.sub.unsubscribe();
+            upload.file.progress.status = UploadStatus.Canceled;
             this.serviceEvents.emit({ type: 'cancelled', file: upload.file });
           });
-          this.uploads = [];
-          this.fileList = null;
-          this.files = [];
         break;
       }
     });

diff --git a/src/styles/app.sass b/src/styles/app.sass
@@ -1,30 +1,74 @@
 @charset 'utf8'
 
-@import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400,600,700')
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700')
+@import '../../node_modules/bulma/sass/base/minireset'
 @import '../../node_modules/bulma/sass/utilities/all'
 @import '../../node_modules/bulma/sass/base/all'
 @import '../../node_modules/bulma/sass/grid/columns'
 @import '../../node_modules/bulma/sass/layout/hero'
+@import '../../node_modules/bulma/sass/components/nav'
 
 $blue: #96D3ED
 $red: #ed145b
 $green: #14ec84
 $grey: #7e9494
 $light: #9cb7be
 $text: #efeff0
+$background: #303143
 
 html, body
-  background: #303143
-  font-family: 'Raleway', sans-serif
+  width: 100%
+  background: $background
+  font-family: 'Open Sans', sans-serif
+
+.label, .checkbox
+  font-size: 16px
+  font-weight: $weight-normal
+  color: $white
+  margin: 0 10px
+  &:hover
+    color: $white
+
+.label
+  display: block
+  float: left
+
+input[type="text"]
+  height: 50px
+  background: $background
+  border: 1px solid $grey
+  width: 50px
+  color: $white
+  display: block
+  float: left
+  margin: -10px 15px 0 15px
+  text-align: center
+  border-radius: 4px
+  outline: none
+  font-size: 16px
+
+  &:hover, &:focus
+    border: 1px solid $grey
+
+.verbose-data
+  color: $white
+  font-size: 12px
 
 .hero
-  background: #303143
+  background: $background
+
+  .hero-head
+    h1
+      color: $grey
+      font-size: 24px
+      margin-top: 50px
 
   .drop-container
     padding: 20px 0 60px 0
     border: 3px dashed $grey
     border-radius: 10px
     margin-bottom: 50px
+    margin-top: 20px
     h1
       color: $text
       font-size: 40px
@@ -105,7 +149,7 @@ html, body
   border-radius: 40px
   background: $blue
   outline: none
-  font-size: 32px
+  font-size: 26px
   text-align: center
   padding: 10px 30px
   cursor: pointer
@@ -127,4 +171,3 @@ html, body
   color: $light
   text-align: center
   padding-bottom: 50px
-