feat(fileUploader): Added queueMaxSizeLimit, to limit the file size of all items in the uploadqueue.

README.md

@@ -43,63 +43,6 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
 
 ```public uploader:FileUploader = new FileUploader({url: URL}); ```
 
-## Using ***ng2-file-upload*** with multiple uploads and other parameters
-To add extra information (i.e. title, description) when uploading multiple files:
-
-In your template:
-```
-<tr *ngFor="let item of uploader.queue">
-                            <td><strong>{{ item?.file?.name }}</strong></td>
-
-                            **<td><input type="text" [(ngModel)]="item.formData['title']" placeholder="Title of File"></td>**
-                            **<td><input type="text" [(ngModel)]="item.formData['description']" placeholder="File Description"></td>**
-                            <td nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
-                            <td >
-                                <div class="progress" style="margin-bottom: 0;">
-                                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
-                                </div>
-                            </td>
-                            <td class="text-center">
-                                <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
-                                <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
-                                <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
-                            </td>
-                            <td nowrap>
-                                <button type="button" class="btn btn-success btn-xs"
-                                        (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
-                                    <span class="glyphicon glyphicon-upload"></span> Upload
-                                </button>
-                                <button type="button" class="btn btn-warning btn-xs"
-                                        (click)="item.cancel()" [disabled]="!item.isUploading">
-                                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
-                                </button>
-                                <button type="button" class="btn btn-danger btn-xs"
-                                        (click)="item.remove()">
-                                    <span class="glyphicon glyphicon-trash"></span> Remove
-                                </button>
-                            </td>
-
-                        </tr>
-```
-You can add inputs outside of a form, and use ```[(ngModel)]``` to add keys to the ```item``` object.
-
-```
-                            **<td><input type="text" [(ngModel)]="item.formData['title']" placeholder="Title of File"></td>**
-                            **<td><input type="text" [(ngModel)]="item.formData['description']" placeholder="File Description"></td>**
-```
-Inside your upload component, add the following:
-
-```
-    this.uploader.onBuildItemForm = (item, form) => {
-      form.append('title', item.formData.title);
-      form.append('description', item.formData.description);
-      console.log(item);
-    };
-
-```
-If you are using `Node.js` with `multer`, the extra information will not show up in the `req.files` object. You will have to pull the data from the `req.body` object.
-
-
 ## API for `ng2FileSelect`
 
 ### Properties
@@ -124,6 +67,7 @@ If you are using `Node.js` with `multer`, the extra information will not show up
   5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
   6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
   7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false.
+  8. `queueMaxSizeLimit` - States the maximum allowed size (in bytes) of all files in the queue that are going to be uploaded.
 
 ### Events
 

src/file-upload/file-uploader.class.ts

@@ -30,6 +30,7 @@ export interface FileUploaderOptions {
   authToken?: string;
   maxFileSize?: number;
   queueLimit?: number;
+  queueMaxSizeLimit? : number;
   removeAfterUpload?: boolean;
   url?: string;
   disableMultipart?: boolean;
@@ -77,6 +78,10 @@ export class FileUploader {
     this.autoUpload = this.options.autoUpload;
     this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
 
+    if (this.options.queueMaxSizeLimit) {
+      this.options.filters.unshift({ name: 'queueMaxSizeLimit', fn: this._queueMaxSizeLimitFilter });
+    }
+
     if (this.options.maxFileSize) {
       this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
     }
@@ -420,6 +425,17 @@ export class FileUploader {
     return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
   }
 
+  protected _queueMaxSizeLimitFilter(item: FileLikeObject): boolean {    
+    let queueFileSize = 0;    
+    let queueNotProcessedItems = this.queue.filter(queuedItem => !(queuedItem.isSuccess || queuedItem.isCancel || queuedItem.isError));
+    if(queueNotProcessedItems.length>0)
+    {
+      // total size of all queued items that are going to be uploaded
+      queueFileSize = queueNotProcessedItems.map(queuedItem => queuedItem.file.size).reduce((fileSizeA,fileSizeB)=> fileSizeA + fileSizeB);
+    }
+    return this.options.queueMaxSizeLimit === undefined || (queueFileSize + item.size) < this.options.queueMaxSizeLimit;
+  }
+
   protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean {
     this._failFilterIndex = -1;
     return !filters.length ? true : filters.every((filter: FilterFunction) => {

src/spec/file-select.directive.spec.ts

@@ -63,6 +63,7 @@ describe('Directive: FileSelectDirective', () => {
     expect(options.isHTML5).toBeTruthy();
     expect(options.removeAfterUpload).toBeFalsy();
     expect(options.disableMultipart).toBeFalsy();
+    expect(options.queueMaxSizeLimit).toBeUndefined();
   });
 
   it('can get filters', () => {