title: can not upload file through formdata in angular 6
body: <p>I am using angular to upload an image as shown in the code below.</p>
  
  <p>The file data is retrieved from this.formGroup.value, however the issue is when this file data is passed to formData, it is found formData is still empty, thus unable to send through http request. I don't know how to solve this problem. any idea or other way?</p>
  
  <pre><code>    const formData: any = new FormData();
      formData.append("avatar", this.formGroup.value);
      console.log(formData);
      this.http.post(environment.baseUrl + '/api/users/picture',formData); 
  </code></pre>
  
  <p>The whole code is shown below.</p>
  
  <pre><code>&lt;form action="uploadUrl" [formGroup]="formGroup" method="post" enctype="multipart/form-data" (ngSubmit)="onSubmit()"&gt;
            &lt;input type="file" name="avatar" /&gt;
           &lt;button type="submit" [disabled]="formGroup.invalid || formGroup.prestine"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  onSubmit(){
      console.log('onSubmit',this.formGroup.value);
      const formData: any = new FormData();
      formData.append("avatar", this.formGroup.value);
  
      console.log(formData);   // the formData is empty
  
  
      this.http.post(environment.baseUrl + '/api/users/picture',formData); 
        .subscribe( res =&gt; {
            console.log(res);
        }, error =&gt; {
          console.log('changePicture error',error);
        });
  
    }
  </code></pre>