title: Angular - Unable to Upload MultiPart file
body: <p>I am working on an Angular 8 application that uses the @aws-amplify/api lib for http rest requests to a Spring Boot backend application.
  I am trying to perform a MultiPart file upload from Angular to Spring Boot but running into problems. I am trying to use the ngx-material-file-input lib to perform the upload
  Here is the relevant code sections
  <strong>Form Element in Component HTML File</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
          &lt;ngx-mat-file-input formControlName="pressReleaseFile" placeholder="Required input" valuePlaceholder="No file selected" required&gt;&lt;/ngx-mat-file-input&gt;
          &lt;mat-icon matSuffix&gt;folder&lt;/mat-icon&gt;
          &lt;mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('required')"&gt;
            Please select a file
          &lt;/mat-error&gt;
          &lt;mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('maxContentSize')"&gt;
            The total size must not exceed {{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').maxSize | byteFormat}}
            ({{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').actualSize
            | byteFormat}}).
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>**Upload method in component typescript file **</p>
  
  <pre><code>public savePressRelease(): void {
      //See https://stackoverflow.com/questions/57979241/upload-file-as-multipart-form-data-from-angular-with-ngx-mat-file-input
      if (!this.isFormSubmissionValid()) {
        return;
      }
  
      const pressReleaseFile = this.pressReleaseForm.get('pressReleaseFile').value;
       const formData: FormData = new FormData();
       formData.append('pressReleaseFile', pressReleaseFile);
       console.log("formData");
       console.log(formData);
  
      this.error = null;
      this.inProgress = true;
  
  
      this.pressReleaseService.savePressReleaseRecord(formData)
        .then((savedPressRelease: PressRelease) =&gt; {
          this.inProgress = false;
          this.dialogRef.close(true);
          this.snackBar.open('Press Release Record Added.', null, { duration: 3000 });
        })
        .catch( error =&gt; {
          this.inProgress = false;
          this.error = 'There was an error saving the Press Release Record';
        });
    }
  </code></pre>
  
  <p>** Service method savePressReleaseRecord **</p>
  
  <pre><code> savePressReleaseRecord(formData: FormData): Promise&lt;PressRelease&gt; {
      console.log("formData pressReleaseData");
      console.log(formData);
      return API.post('serverAPI', '/pressRelease', { body: formData })
      .then(r =&gt; r as PressRelease);
    }
  </code></pre>
  
  <p>One thing I noticed is that the output of printing formData is an empty object.
  Is anything standing out that I am doing wrong
  When I examine the request payload in chrome developer tools - the request payload to the Spring Boot endpoint is empty</p>
  
  <p>Any help with this is greatly appreciated</p>
  
  <p>Thanks
  Damien</p>