Added allowedContentTypes. If the Content-Type of a file is not allow…

…ed, the file will rejected.
henishv · Nov 9, 2017 · f13c1bd · f13c1bd
1 parent 6b0c1e1
commit f13c1bd
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 31 deletions.
diff --git 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
@@ -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<UploadInput>();
     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
@@ -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
@@ -22,44 +22,35 @@ export class NgUploaderService {
   serviceEvents: EventEmitter<UploadOutput>;
   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<any>();
     this.uploadScheduler = new Subject();
     this.subs = [];
+    this.contentTypes = contentTypes;
 
     this.uploadScheduler
       .mergeMap(upload => this.startUpload(upload), concurrency)
       .subscribe(uploadOutput => this.serviceEvents.emit(uploadOutput));
   }
 
   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
@@ -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
@@ -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);