allow to specify number of parallel uploads

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

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

@@ -39,12 +39,12 @@ export interface FileUploaderOptions {
   parametersBeforeFiles?: boolean;
   formatDataFunction?: Function;
   formatDataFunctionIsAsync?: boolean;
+  parallelUploads?: number;
 }
 
 export class FileUploader {
 
   public authToken: string;
-  public isUploading: boolean = false;
   public queue: FileItem[] = [];
   public progress: number = 0;
   public _nextIndex: number = 0;
@@ -52,6 +52,10 @@ export class FileUploader {
   public authTokenHeader: string;
   public response: EventEmitter<any>;
 
+  public get isUploading(): boolean {
+    return this.queue.some((item: FileItem) => item.isUploading);
+  }
+
   public options: FileUploaderOptions = {
     autoUpload: false,
     isHTML5: true,
@@ -89,8 +93,8 @@ export class FileUploader {
       this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
     }
 
-    for (let i = 0; i < this.queue.length; i++) {
-      this.queue[ i ].url = this.options.url;
+    for (let item of this.queue) {
+      item.url = this.options.url;
     }
   }
 
@@ -150,10 +154,6 @@ export class FileUploader {
     let item = this.queue[ index ];
     let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';
     item._prepareToUploading();
-    if (this.isUploading) {
-      return;
-    }
-    this.isUploading = true;
     (this as any)[ transport ](item);
   }
 
@@ -172,7 +172,10 @@ export class FileUploader {
       return;
     }
     items.map((item: FileItem) => item._prepareToUploading());
-    items[ 0 ].upload();
+    let numberUploadsToStart = Math.min(items.length, this.options.parallelUploads || 1);
+    for (let i = 0; i < numberUploadsToStart; ++i) {
+      items[ i ].upload();
+    }
   }
 
   public cancelAll(): void {
@@ -276,7 +279,6 @@ export class FileUploader {
     item._onComplete(response, status, headers);
     this.onCompleteItem(item, response, status, headers);
     let nextItem = this.getReadyItems()[ 0 ];
-    this.isUploading = false;
     if (nextItem) {
       nextItem.upload();
       return;
@@ -373,7 +375,7 @@ export class FileUploader {
     }
     xhr.onreadystatechange = function () {
       if (xhr.readyState == XMLHttpRequest.DONE) {
-        that.response.emit(xhr.responseText)
+        that.response.emit(xhr.responseText);
       }
     }
     if (this.options.formatDataFunctionIsAsync) {