+
+
@@ -62,11 +86,4 @@ Drag & Drop
-
diff --git a/src/app/components/app-home/app-home.component.spec.ts b/src/app/components/app-home/app-home.component.spec.ts
deleted file mode 100644
index c6d35ccb..00000000
--- a/src/app/components/app-home/app-home.component.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
- inject,
- async,
- TestBed,
- ComponentFixture
-} from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-
-import { AppHomeComponent } from './app-home.component';
-
-describe(`App`, () => {
- let comp: AppHomeComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ AppHomeComponent ],
- imports: [ FormsModule ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(AppHomeComponent);
- comp = fixture.componentInstance;
-
- fixture.detectChanges();
- });
-
- it(`should be readly initialized`, () => {
- expect(fixture).toBeDefined();
- expect(comp).toBeDefined();
- });
-});
diff --git a/src/app/components/app-home/app-home.component.ts b/src/app/components/app-home/app-home.component.ts
index b87b1b9c..8d3c2fb0 100644
--- 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;
humanizeBytes: Function;
+
constructor() {
+ this.formData = {
+ concurrency: 0,
+ autoUpload: false,
+ verbose: false
+ };
+
this.files = [];
this.uploadInput = new EventEmitter();
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
index 5cff5310..514d8a1e 100644
--- 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
index f365ec1b..f32fb258 100644
--- a/src/styles/app.sass
+++ b/src/styles/app.sass
@@ -1,10 +1,12 @@
@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
@@ -12,19 +14,61 @@ $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
-
