title: Uploading file with other form fields in Angular 2 and Spring MVC
body: <p>I am trying to <strong>upload file and other form field contents</strong> from my Angular 2 front end to Spring back end. But somehow I am not able to do it. Here is my code:</p>
  
  <p><strong>app.component.ts</strong> </p>
  
  <pre><code>fileChange(e){
      this.fileList = e.target.files;
    }
  
  uploadPdf(){
      if(this.fileList.length&gt;0){
        let file: File = this.fileList[0];
        let formData:FormData = new FormData();
  
        formData.append('uploadFile', file, file.name);
        formData.append('info',this.model);
  
        console.log(file.size);
  
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(this.url,formData, options)
          /*.map((res: Response) =&gt; res.json())*/
          .catch(error =&gt; Observable.throw(error))
          .subscribe(
            data =&gt;{
              this.data = data;
              console.log(this.data);
            }
            ,
            error =&gt; console.log(error)
          )
      }
    }
  </code></pre>
  
  <p><strong>app.cmoponent.html</strong></p>
  
  <pre><code>&lt;h1 class="text-center"&gt;
    PDF Viewer and Uploader Example
  &lt;/h1&gt;
  &lt;div class="text-center"&gt;
    &lt;form enctype="multipart/form-data"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="name"&gt;Name: &lt;/label&gt;
        &lt;input type="text" id="name" class="form-control" name="name" [(ngModel)]="model.name"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="email"&gt;Email: &lt;/label&gt;
        &lt;input type="email" id="email" class="form-control" name="email" [(ngModel)]="model.email"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="pdfInput"&gt;Select File: &lt;/label&gt;
        &lt;input type="file" id="pdfInput" class="form-control" name="pdfInput" (change)="fileChange($event)"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;button type="button" class="btn btn-success" (click)="uploadPdf()"&gt;Upload File!&lt;/button&gt;&lt;span&gt;   &lt;/span&gt;
        &lt;button type="button" class="btn btn-success" (click)="printData()"&gt;Print to Console!&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>model.ts</strong></p>
  
  <pre><code>export class Model{
  
    name: string;
    email: string;
  
  }
  </code></pre>
  
  <p>Now in Backend:</p>
  
  <p><strong>ExampleModel.java</strong></p>
  
  <pre><code>public class ExampleModel {
  
  private String name;
  private String email;
  //Getters and Setters
  </code></pre>
  
  <p><strong>MainController.java</strong></p>
  
  <pre><code>@RequestMapping(value = "/file",method = RequestMethod.POST)
      @ResponseBody
      public ResponseEntity&lt;String&gt; addUser(@RequestParam("uploadFile") MultipartFile file, @RequestParam("info") ExampleModel model){}
  </code></pre>
  
  <p>So, how to get that <code>info</code> labeled data in the spring controller? Above I have shown my attempt which is wrong so, what is the correct approach to get other form fields data?</p>
  
  <p>How the Controller method with annotations should be defined or is there other way to send data(both file + form fields) from Angular 2?</p>