Angular2 - Add Json with file
<p>I'm trying to upload files in my angular2 application. Currently I'm using the <a href="http://valor-software.com/ng2-file-upload/" rel="nofollow">ng2-file-upload</a> directives and it works for uploading files. However, I would like to also upload a JSON object along with the file. Kinda like this</p>

<pre><code>{username:"john",file:file}
</code></pre>

<p>I don’t see how I can implement this feature. I would be open to changing APIs if need be. Here is what I currently have, which can also be found in the sample online. </p>

<p>fetch-datat.ts</p>

<pre><code>import * as ng from '@angular/core';
import { Http } from '@angular/http';
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
const URL = 'http://localhost:5000/api/SampleData/upload';

@ng.Component({
  selector: 'fetch-data',
  directives: [FileSelectDirective, FileDropDirective],  
  template: require('./fetch-data.html')
})

export class FetchData {
  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
  constructor(){
    console.log(this.uploader); 
  }
  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }
}
</code></pre>

<p>fetch-data.html</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="navbar navbar-default"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href&gt;Angular2 File Upload&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-3"&gt;
            &lt;h3&gt;Select files&lt;/h3&gt;
            &lt;div ng2FileDrop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone"&gt;
                Base drop zone
            &lt;/div&gt;
            &lt;div ng2FileDrop
                 [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
                 (fileOver)="fileOverAnother($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone"&gt;
                Another drop zone
            &lt;/div&gt;
            Multiple
            &lt;input type="file" ng2FileSelect [uploader]="uploader" multiple  /&gt;&lt;br/&gt;
            Single
            &lt;input type="file" ng2FileSelect [uploader]="uploader" /&gt;
        &lt;/div&gt;
        &lt;div class="col-md-9" style="margin-bottom: 40px"&gt;
            &lt;h3&gt;Upload queue&lt;/h3&gt;
            &lt;p&gt;Queue length: {{ uploader?.queue?.length }}&lt;/p&gt;
            &lt;table class="table"&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th width="50%"&gt;Name&lt;/th&gt;
                    &lt;th&gt;Size&lt;/th&gt;
                    &lt;th&gt;Progress&lt;/th&gt;
                    &lt;th&gt;Status&lt;/th&gt;
                    &lt;th&gt;Actions&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr *ngFor="let item of uploader.queue"&gt;
                    &lt;td&gt;&lt;strong&gt;{{ item?.file?.name }}&lt;/strong&gt;&lt;/td&gt;
                    &lt;td *ngIf="uploader.isHTML5" nowrap&gt;{{ item?.file?.size/1024/1024 | number:'.2' }} MB&lt;/td&gt;
                    &lt;td *ngIf="uploader.isHTML5"&gt;
                        &lt;div class="progress" style="margin-bottom: 0;"&gt;
                            &lt;div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                    &lt;td class="text-center"&gt;
                        &lt;span *ngIf="item.isSuccess"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/span&gt;
                        &lt;span *ngIf="item.isCancel"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;&lt;/span&gt;
                        &lt;span *ngIf="item.isError"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/span&gt;
                    &lt;/td&gt;
                    &lt;td nowrap&gt;
                        &lt;button type="button" class="btn btn-success btn-xs"
                                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"&gt;
                            &lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Upload
                        &lt;/button&gt;
                        &lt;button type="button" class="btn btn-warning btn-xs"
                                (click)="item.cancel()" [disabled]="!item.isUploading"&gt;
                            &lt;span class="glyphicon glyphicon-ban-circle"&gt;&lt;/span&gt; Cancel
                        &lt;/button&gt;
                        &lt;button type="button" class="btn btn-danger btn-xs"
                                (click)="item.remove()"&gt;
                            &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove
                        &lt;/button&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;div&gt;
                &lt;div&gt;
                    Queue progress:
                    &lt;div class="progress" style=""&gt;
                        &lt;div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;button type="button" class="btn btn-success btn-s"
                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"&gt;
                    &lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Upload all
                &lt;/button&gt;
                &lt;button type="button" class="btn btn-warning btn-s"
                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"&gt;
                    &lt;span class="glyphicon glyphicon-ban-circle"&gt;&lt;/span&gt; Cancel all
                &lt;/button&gt;
                &lt;button type="button" class="btn btn-danger btn-s"
                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length"&gt;
                    &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove all
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>