diff --git a/.gitignore b/.gitignore index b64acb80..c33cd24b 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ lib/ *.ngsummary.json *.ngfactory.ts *.d.ts +yarn.lock +.idea diff --git a/src/components/app-home/app-home.component.ts b/src/components/app-home/app-home.component.ts index 9c5ec14d..05fb345a 100644 --- a/src/components/app-home/app-home.component.ts +++ b/src/components/app-home/app-home.component.ts @@ -14,7 +14,7 @@ export class AppHomeComponent { options: UploaderOptions; constructor() { - this.options = { concurrency: 1 }; + this.options = { concurrency: 1, allowedContentTypes: ['image/png', 'image/jpeg', 'image/gif'] }; this.files = []; this.uploadInput = new EventEmitter(); this.humanizeBytes = humanizeBytes; @@ -24,7 +24,7 @@ export class AppHomeComponent { if (output.type === 'allAddedToQueue') { const event: UploadInput = { type: 'uploadAll', - url: 'http://ngx-uploader.com/upload', + url: 'http://localhost:4900/upload', method: 'POST', data: { foo: 'bar' } }; @@ -43,6 +43,8 @@ export class AppHomeComponent { this.dragOver = false; } else if (output.type === 'drop') { this.dragOver = false; + } else if (output.type === 'rejected' && typeof output.file !== 'undefined') { + console.log(output.file.name + ' rejected'); } this.files = this.files.filter(file => file.progress.status !== UploadStatus.Done); @@ -51,7 +53,7 @@ export class AppHomeComponent { startUpload(): void { const event: UploadInput = { type: 'uploadAll', - url: 'http://ngx-uploader.com/upload', + url: 'http://localhost:4900/upload', method: 'POST', data: { foo: 'bar' } }; diff --git a/src/ngx-uploader/classes/interfaces.ts b/src/ngx-uploader/classes/interfaces.ts index e9c5a99c..760b654c 100644 --- a/src/ngx-uploader/classes/interfaces.ts +++ b/src/ngx-uploader/classes/interfaces.ts @@ -2,6 +2,7 @@ import { Subscription } from 'rxjs/Subscription'; export interface UploaderOptions { concurrency: number; + allowedContentTypes?: string[]; } export interface BlobFile extends Blob { @@ -45,7 +46,7 @@ export interface UploadFile { export interface UploadOutput { type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' - | 'dragOut' | 'drop' | 'removed' | 'removedAll'; + | 'dragOut' | 'drop' | 'removed' | 'removedAll' | 'rejected'; file?: UploadFile; nativeFile?: File; } diff --git a/src/ngx-uploader/classes/ngx-uploader.class.ts b/src/ngx-uploader/classes/ngx-uploader.class.ts index 5e9da2ff..97aa72f1 100644 --- a/src/ngx-uploader/classes/ngx-uploader.class.ts +++ b/src/ngx-uploader/classes/ngx-uploader.class.ts @@ -22,12 +22,14 @@ export class NgUploaderService { serviceEvents: EventEmitter; uploadScheduler: Subject<{ file: UploadFile, event: UploadInput }>; subs: { id: string, sub: Subscription }[]; + contentTypes: string[]; - constructor(concurrency: number = Number.POSITIVE_INFINITY) { + constructor(concurrency: number = Number.POSITIVE_INFINITY, contentTypes: string[] = ['*']) { this.queue = []; this.serviceEvents = new EventEmitter(); this.uploadScheduler = new Subject(); this.subs = []; + this.contentTypes = contentTypes; this.uploadScheduler .mergeMap(upload => this.startUpload(upload), concurrency) @@ -35,31 +37,20 @@ export class NgUploaderService { } handleFiles(incomingFiles: FileList): void { - this.queue.push(...[].map.call(incomingFiles, (file: File, i: number) => { - const uploadFile: UploadFile = { - fileIndex: i, - id: this.generateId(), - name: file.name, - size: file.size, - type: file.type, - form: new FormData(), - progress: { - status: UploadStatus.Queue, - data: { - percentage: 0, - speed: 0, - speedHuman: `${humanizeBytes(0)}/s`, - startTime: null, - endTime: null, - eta: null, - etaHuman: null - } - }, - lastModifiedDate: file.lastModifiedDate, - sub: undefined, - nativeFile: file - }; + let allowedIncomingFiles: File[] = []; + + for (let i = 0; i < incomingFiles.length; i++) { + let checkFile = incomingFiles[i]; + if (this.isContentTypeAllowed(checkFile.type)) { + allowedIncomingFiles.push(checkFile); + } else { + const rejectedFile: UploadFile = this.makeUploadFile(checkFile, i); + this.serviceEvents.emit({ type: 'rejected', file: rejectedFile }); + } + } + this.queue.push(...[].map.call(allowedIncomingFiles, (file: File, i: number) => { + const uploadFile: UploadFile = this.makeUploadFile(file, i); this.serviceEvents.emit({ type: 'addedToQueue', file: uploadFile }); return uploadFile; })); @@ -256,4 +247,48 @@ export class NgUploaderService { generateId(): string { return Math.random().toString(36).substring(7); } + + private allContentTypesAllowed(): boolean { + if (this.contentTypes.find((type: string) => type === '*') !== undefined) { + return true; + } + return false; + } + + private isContentTypeAllowed(mimetype: string): boolean { + if (this.allContentTypesAllowed()) { + return true; + } + if (this.contentTypes.find((type: string) => type === mimetype ) != undefined) { + return true; + } + + return false; + } + + private makeUploadFile(file: File, index: number): UploadFile { + return { + fileIndex: index, + id: this.generateId(), + name: file.name, + size: file.size, + type: file.type, + form: new FormData(), + progress: { + status: UploadStatus.Queue, + data: { + percentage: 0, + speed: 0, + speedHuman: `${humanizeBytes(0)}/s`, + startTime: null, + endTime: null, + eta: null, + etaHuman: null + } + }, + lastModifiedDate: file.lastModifiedDate, + sub: undefined, + nativeFile: file + }; + } } diff --git a/src/ngx-uploader/directives/ng-file-drop.directive.ts b/src/ngx-uploader/directives/ng-file-drop.directive.ts index 3f6233a3..e5e84012 100644 --- a/src/ngx-uploader/directives/ng-file-drop.directive.ts +++ b/src/ngx-uploader/directives/ng-file-drop.directive.ts @@ -22,7 +22,8 @@ export class NgFileDropDirective implements OnInit, OnDestroy { ngOnInit() { this._sub = []; const concurrency = this.options && this.options.concurrency || Number.POSITIVE_INFINITY; - this.upload = new NgUploaderService(concurrency); + const allowedContentTypes = this.options && this.options.allowedContentTypes || ['*']; + this.upload = new NgUploaderService(concurrency, allowedContentTypes); this.el = this.elementRef.nativeElement; diff --git a/src/ngx-uploader/directives/ng-file-select.directive.ts b/src/ngx-uploader/directives/ng-file-select.directive.ts index 100c83a8..1e884726 100644 --- a/src/ngx-uploader/directives/ng-file-select.directive.ts +++ b/src/ngx-uploader/directives/ng-file-select.directive.ts @@ -22,7 +22,8 @@ export class NgFileSelectDirective implements OnInit, OnDestroy { ngOnInit() { this._sub = []; const concurrency = this.options && this.options.concurrency || Number.POSITIVE_INFINITY; - this.upload = new NgUploaderService(concurrency); + const allowedContentTypes = this.options && this.options.allowedContentTypes || ['*']; + this.upload = new NgUploaderService(concurrency, allowedContentTypes); this.el = this.elementRef.nativeElement; this.el.addEventListener('change', this.fileListener, false);