Skip to content

Commit

Permalink
docs(readme): documentation for version 3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jkuri committed Apr 29, 2017
1 parent 08fcd43 commit e058819
Show file tree
Hide file tree
Showing 11 changed files with 276 additions and 495 deletions.
405 changes: 123 additions & 282 deletions README.md

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './src/ngx-uploader/module/ngx-uploader.module';
export * from './src/ngx-uploader/services/ngx-uploader';
export * from './src/ngx-uploader/directives/ng-file-select';
export * from './src/ngx-uploader/classes/ngx-uploader.class';
export * from './src/ngx-uploader/directives/ng-file-select.directive';
export * from './src/ngx-uploader/directives/ng-file-drop.directive';
12 changes: 7 additions & 5 deletions src/app/components/app-home/app-home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@
<div class="container">
<div class="columns is-multiline">
<div class="column is-6 is-offset-3">
<div class="drop-container">
<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
<h1>Drag & Drop</h1>
<label class="upload-button">
<input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
or choose file(s)
</label>
</div>
</div>
<div class="column is-6 is-offset-3">
<label class="upload-button">
<input type="file" ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
or choose file(s)
</label>
</div>
<div class="column is-6 is-offset-3">
<div class="columns">
<div class="column is-4 centered">
Expand Down
14 changes: 10 additions & 4 deletions src/app/components/app-home/app-home.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, EventEmitter } from '@angular/core';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from '../../../ngx-uploader/services/ngx-uploader';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes } from '../../../../';

interface FormData {
concurrency: number;
Expand All @@ -14,8 +14,9 @@ interface FormData {
export class AppHomeComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter<any>;
uploadInput: EventEmitter<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;


constructor() {
Expand All @@ -26,7 +27,7 @@ export class AppHomeComponent {
};

this.files = [];
this.uploadInput = new EventEmitter<any>();
this.uploadInput = new EventEmitter<UploadInput>();
this.humanizeBytes = humanizeBytes;
}

Expand All @@ -35,7 +36,6 @@ export class AppHomeComponent {

if (output.type === 'allAddedToQueue') {
if (this.formData.autoUpload) {
console.log('yes');
const event: UploadInput = {
type: 'uploadAll',
url: '/upload',
Expand All @@ -53,6 +53,12 @@ export class AppHomeComponent {
this.files[index] = output.file;
} else if (output.type === 'removed') {
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
this.dragOver = false;
} else if (output.type === 'drop') {
this.dragOver = false;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Angular Webpack Seed</title>
<title>ngx-uploader - Angular2+ File Uploader</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { EventEmitter, Injectable, Provider } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { Subscriber } from 'rxjs/Subscriber';
Expand Down Expand Up @@ -30,17 +30,18 @@ export interface UploadFile {
name: string;
size: number;
type: string;
progress: UploadProgress
progress: UploadProgress;
response?: any;
}

export interface UploadOutput {
type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled';
type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'removed' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop';
file?: UploadFile;
}

export interface UploadInput {
type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll';
url: string;
url?: string;
method?: string;
id?: string;
fileIndex?: number;
Expand All @@ -62,7 +63,6 @@ export function humanizeBytes(bytes: number): string {
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

@Injectable()
export class NgUploaderService {
fileList: FileList;
files: UploadFile[];
Expand All @@ -75,8 +75,9 @@ export class NgUploaderService {
this.uploads = [];
}

handleFiles = (files: FileList) => {
handleFiles(files: FileList): void {
this.fileList = files;

this.files = [].map.call(files, (file: File, i: number) => {
const uploadFile: UploadFile = {
fileIndex: i,
Expand All @@ -100,7 +101,7 @@ export class NgUploaderService {
});

this.serviceEvents.emit({ type: 'allAddedToQueue' });
};
}

initInputEvents(input: EventEmitter<UploadInput>): void {
input.subscribe((event: UploadInput) => {
Expand Down Expand Up @@ -188,21 +189,34 @@ export class NgUploaderService {
}
}, false);

xhr.upload.addEventListener('load', (e: Event) => {
file.progress = {
status: UploadStatus.Done,
data: {
percentage: 100,
speed: null,
speedHuman: null
xhr.upload.addEventListener('error', (e: Event) => {
observer.error(e);
observer.complete();
});

xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
file.progress = {
status: UploadStatus.Done,
data: {
percentage: 100,
speed: null,
speedHuman: null
}
};

try {
file.response = JSON.parse(xhr.response);
} catch (e) {
file.response = xhr.response;
}
};

observer.next({ type: 'done', file: file });
observer.complete();
}, false);
observer.next({ type: 'done', file: file });
observer.complete();
}
};

xhr.open(method, url);
xhr.open(method, url, true);

const form = new FormData();
try {
Expand Down Expand Up @@ -234,7 +248,3 @@ export class NgUploaderService {
return Math.random().toString(36).substring(7);
}
}

export const NgUploaderServiceProvider: Provider = {
provide: NgUploaderService, useClass: NgUploaderService
};
84 changes: 84 additions & 0 deletions src/ngx-uploader/directives/ng-file-drop.directive.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Directive, ElementRef, EventEmitter, Input, Output, OnInit, OnDestroy, PLATFORM_ID, Inject, HostListener } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { NgUploaderService, UploadOutput, UploadInput, UploadFile } from '../classes/ngx-uploader.class';

@Directive({
selector: '[ngFileDrop]'
})
export class NgFileDropDirective implements OnInit, OnDestroy {
@Input() uploadInput: EventEmitter<UploadInput>;
@Output() uploadOutput: EventEmitter<UploadOutput>;

upload: NgUploaderService;
isServer: boolean = isPlatformServer(this.platform_id);
el: HTMLInputElement;

constructor(@Inject(PLATFORM_ID) private platform_id, private elementRef: ElementRef) {
this.upload = new NgUploaderService();
this.uploadOutput = new EventEmitter<UploadOutput>();
}

ngOnInit() {
if (this.isServer) {
return;
}

this.el = this.elementRef.nativeElement;

this.upload.serviceEvents.subscribe((event: UploadOutput) => {
this.uploadOutput.emit(event);
});

if (this.uploadInput instanceof EventEmitter) {
this.upload.initInputEvents(this.uploadInput);
}

this.el.addEventListener('drop', this.stopEvent, false);
this.el.addEventListener('dragenter', this.stopEvent, false);
this.el.addEventListener('dragover', this.stopEvent, false);
this.el.addEventListener('dragover', this.stopEvent, false);
}

ngOnDestroy() {
if (this.isServer) {
return;
}

this.uploadInput.unsubscribe();
}

stopEvent = (e: Event) => {
e.stopPropagation();
e.preventDefault();
}

@HostListener('drop', ['$event'])
public onDrop(e: any) {
e.stopPropagation();
e.preventDefault();

const event: UploadOutput = { type: 'drop' };
this.uploadOutput.emit(event);
this.upload.handleFiles(e.dataTransfer.files);
}

@HostListener('dragover', ['$event'])
public onDragOver(e: Event) {
if (!e) {
return;
}

const event: UploadOutput = { type: 'dragOver' };
this.uploadOutput.emit(event);
}

@HostListener('dragleave', ['$event'])
public onDragLeave(e: Event) {
if (!e) {
return;
}

const event: UploadOutput = { type: 'dragOut' };
this.uploadOutput.emit(event);
}
}
Loading

0 comments on commit e058819

Please sign in to comment.