title: (angular 8) file or picture got invalid value while converted to formdata (PS: formdata print Object Form{})
body: <p>I got the problem for getting  invalid value from formdata. The value is correct in this.fileData with size 5701, but get invalid value when it convert to form data. It becomes {} when I console.log
  form data. When I console.log(formdata[0]) getting value undefined.</p>
  
  <p>The code I expect that when the formdata post to backend, the file is valid. But backend gets the 0 size picture. I guess that the problem is from formdata, because formdata gets nothing.</p>
  
  <p>about html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 offset-md-3"&gt;
              &lt;h3&gt;Choose File&lt;/h3&gt;            
              &lt;div class="form-group"&gt;
                  &lt;input type="file" name="image" (change)="fileProgress($event)" /&gt;
              &lt;/div&gt;
              &lt;div *ngIf="fileUploadProgress"&gt;
                  Upload progress: {{ fileUploadProgress }}
              &lt;/div&gt;
              &lt;div class="image-preview mb-3" *ngIf="previewUrl"&gt;
                  &lt;img [src]="previewUrl" height="300" /&gt;                 
              &lt;/div&gt;
  
              &lt;div class="mb-3" *ngIf="uploadedFilePath"&gt;
                  {{uploadedFilePath}}
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;button class="btn btn-primary"  (click)="onSubmit()"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>about typescripts</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { HttpClient, HttpEventType } from '@angular/common/http';
  import { UploadService } from '../../../model/shared/api/upload.service';
  import { HttpHeaders } from '@angular/common/http';
  import { LoginComponent } from '../../account/auth/login/login.component';
  import { HttpClientModule } from '@angular/common/http';
  //import * as myGlobals from './globals';
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      //'Authorization': 'my-auth-token'
    })
  };
  @Component({
    selector: 'cd-upload',
    templateUrl: './upload.component.html',
    styleUrls: ['./upload.component.scss']
  })
  
  
  export class UploadComponent implements OnInit{
  fileData: File = null;
  previewUrl:any = null;
  fileUploadProgress: string = null;
  uploadedFilePath: string = null;
  
  constructor(private uploadService: UploadService,private httpClient: HttpClient,private http: HttpClient) {
  
  }
  
              fileProgress(fileInput: any) {
                this.fileData = &lt;File&gt;fileInput.target.files[0];
                this.preview();
            }
  
            preview() {
              // Show preview 
              var mimeType = this.fileData.type;
              if (mimeType.match(/image\/*/) == null) {
                return;
              }
  
              var reader = new FileReader();      
              reader.readAsDataURL(this.fileData); 
              reader.onload = (_event) =&gt; { 
                this.previewUrl = reader.result; 
              }
            }
  
            onSubmit() {
              //here is the problem
              const formData = new FormData(); 
              formData.append('files', this.fileData);
              console.log(this.fileData);
              console.log(formData[0]);
              console.log(formData);
              this.http.post('http://api', formData, {
                reportProgress: true,responseType: 'blob' as 'json',
                observe: 'events'   
              }) 
              //here is the problem
  
          }
  
      ngOnInit(){}
  
  
  }
  </code></pre>
  
  <p>here is the backend code with python FLask</p>
  
  <pre><code>  @app.route('/bupload', methods=['GET', 'POST'])
  def bupload():   
      result="Upload done";result1="Upload fail";result2="File not allowed";result3="No selected file";result4="No file part";form="123";
      print(request.files); print(request.files['files']);#request.files=ImmutableMultiDict(request.files).to_dict(flat=False);print(request.files['file']);
      #upload_First(form, request.files['files'])
  
      if 'files' not in request.files:
          flash('No file part');print(file);
          return result4
      file = request.files['files'];print(file);print("@0");
          # if user does not select file, browser also
          # submit a empty part without filename
      if file.filename == '':
          flash('No selected file')
          return result3
      if file and allowed_file(file.filename):
          if(upload_First(form, file)):
              flash('Upload done');
              print("@");
              return result
          else:
              flash('Upload fail')
              return result1
      else:
          flash('File not allowed')
          return result2
  </code></pre>
  
  <p>ps:
  backend can get the value ImmutableMultiDict([('files', )]), but the IDF.jpg is 0 size </p>
  
  <p>ps2:
  console.log(formData.get('files')); show as below
  File {name: "IDF.jpg", lastModified: 1574402253947, lastModifiedDate: Fri Nov 22 2019 13:57:33 GMT+0800 (), webkitRelativePath: "", size: 5701, …}</p>
  
  <p>console.log(formData); show as below
  FormData {}</p>