New beforeUpload event - makes it possible to validate files before t…

…he upload starts (#142) beforeUpload event - validate file (size) before upload starts
bleenco · Dec 1, 2016 · f9c6cc0 · f9c6cc0
1 parent b254c27
commit f9c6cc0
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {