From f9c6cc077b314fa3937d8e30ba162d4ab5b59fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20St=C3=B8rkersen?= <oyvind@strk.no>
Date: Thu, 1 Dec 2016 21:17:50 +0100
Subject: [PATCH] New beforeUpload event - makes it possible to validate files
 before the upload starts (#142)

beforeUpload event - validate file (size) before upload starts
---
 README.md                        | 14 ++++++++++++--
 package.json                     |  2 +-
 src/directives/ng-file-drop.ts   |  7 ++++++-
 src/directives/ng-file-select.ts |  7 ++++++-
 src/services/ng2-uploader.ts     |  9 ++++++++-
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 80aaa66c..93c5d895 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,7 @@ export class DemoApp {
   options: Object = {
     url: 'http://localhost:10050/upload'
   };
+  sizeLimit = 2000000;
 
   handleUpload(data): void {
     if (data && data.response) {
@@ -76,6 +77,13 @@ export class DemoApp {
   fileOverBase(e:any):void {
     this.hasBaseDropZoneOver = e;
   }
+
+  beforeUpload(uploadingFile): void {
+    if (uploadingFile.size > this.sizeLimit) {
+      uploadingFile.setAbort();
+      alert('File is too large');
+    }
+  }
 }
 ````
 
@@ -84,7 +92,8 @@ export class DemoApp {
 <input type="file"
        ngFileSelect
        [options]="options"
-       (onUpload)="handleUpload($event)">
+       (onUpload)="handleUpload($event)"
+       (beforeUpload)="beforeUpload($event)">
 
 <!-- drag & drop file example-->
 <style>
@@ -94,7 +103,8 @@ export class DemoApp {
      [options]="options"
      (onUpload)="handleUpload($event)"
      [ngClass]="{'file-over': hasBaseDropZoneOver}"
-     (onFileOver)="fileOverBase($event)">
+     (onFileOver)="fileOverBase($event)"
+     (beforeUpload)="beforeUpload($event)">
 </div>
 
 <div>
diff --git a/package.json b/package.json
index 5f2c9b1b..be32efb8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-uploader",
   "description": "Angular2 File Uploader",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "license": "MIT",
   "main": "ng2-uploader.js",
   "typings": "ng2-uploader.d.ts",
diff --git a/src/directives/ng-file-drop.ts b/src/directives/ng-file-drop.ts
index 3f66e14a..625f9250 100644
--- a/src/directives/ng-file-drop.ts
+++ b/src/directives/ng-file-drop.ts
@@ -6,7 +6,7 @@ import {
   Output,
   HostListener
 } from '@angular/core';
-import { Ng2Uploader, UploadRejected } from '../services/ng2-uploader';
+import { Ng2Uploader, UploadRejected, UploadedFile } from '../services/ng2-uploader';
 
 @Directive({
   selector: '[ngFileDrop]'
@@ -18,6 +18,7 @@ export class NgFileDropDirective {
   @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
   @Output() onFileOver:EventEmitter<any> = new EventEmitter();
   @Output() onUploadRejected: EventEmitter<UploadRejected> = new EventEmitter<UploadRejected>();
+  @Output() beforeUpload: EventEmitter<UploadedFile> = new EventEmitter<UploadedFile>();
 
    _options:any;
 
@@ -51,6 +52,10 @@ export class NgFileDropDirective {
       this.onPreviewData.emit(data);
     });
 
+    this.uploader._beforeEmitter.subscribe((uploadingFile: UploadedFile) => {
+      this.beforeUpload.emit(uploadingFile)
+    });
+
     setTimeout(() => {
       if (this.events instanceof EventEmitter) {
         this.events.subscribe((data: string) => {
diff --git a/src/directives/ng-file-select.ts b/src/directives/ng-file-select.ts
index 8c781f21..03b9928a 100644
--- a/src/directives/ng-file-select.ts
+++ b/src/directives/ng-file-select.ts
@@ -6,7 +6,7 @@ import {
   Output,
   HostListener
 } from '@angular/core';
-import { Ng2Uploader, UploadRejected } from '../services/ng2-uploader';
+import { Ng2Uploader, UploadRejected, UploadedFile } from '../services/ng2-uploader';
 
 @Directive({
   selector: '[ngFileSelect]'
@@ -17,6 +17,7 @@ export class NgFileSelectDirective {
   @Output() onUpload: EventEmitter<any> = new EventEmitter();
   @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
   @Output() onUploadRejected: EventEmitter<UploadRejected> = new EventEmitter<UploadRejected>();
+  @Output() beforeUpload: EventEmitter<UploadedFile> = new EventEmitter<UploadedFile>();
 
   _options: any;
 
@@ -53,6 +54,10 @@ export class NgFileSelectDirective {
       this.onPreviewData.emit(data);
     });
 
+    this.uploader._beforeEmitter.subscribe((uploadingFile: UploadedFile) => {
+      this.beforeUpload.emit(uploadingFile)
+    });
+
     setTimeout(() => {
       if (this.events) {
         this.events.subscribe((data: string) => {
diff --git a/src/services/ng2-uploader.ts b/src/services/ng2-uploader.ts
index 4352440c..bab5e10b 100644
--- a/src/services/ng2-uploader.ts
+++ b/src/services/ng2-uploader.ts
@@ -84,6 +84,7 @@ export class Ng2Uploader {
   _queue: any[] = [];
   _emitter: EventEmitter<any> = new EventEmitter();
   _previewEmitter: EventEmitter<any> = new EventEmitter();
+  _beforeEmitter: EventEmitter<UploadedFile> = new EventEmitter();
 
   setOptions(options: any): void {
     this.url = options.url != null ? options.url : this.url;
@@ -203,7 +204,13 @@ export class Ng2Uploader {
       xhr.setRequestHeader('Authorization', `${this.authTokenPrefix} ${this.authToken}`);
     }
 
-    xhr.send(form);
+    this._beforeEmitter.emit(uploadingFile);
+
+    if (!uploadingFile.abort) {
+      xhr.send(form);
+    } else {
+      this.removeFileFromQueue(queueIndex);
+    }
   }
 
   addFilesToQueue(files: File[]): void {