CODEWITHSUNDEEP
angularfile-uploadmultipartform-dataangular8
Damien
Damien

Reputation: 4121

Angular - Unable to Upload MultiPart file

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 Form Element in Component HTML File

<mat-form-field>
        <ngx-mat-file-input formControlName="pressReleaseFile" placeholder="Required input" valuePlaceholder="No file selected" required></ngx-mat-file-input>
        <mat-icon matSuffix>folder</mat-icon>
        <mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('required')">
          Please select a file
        </mat-error>
        <mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('maxContentSize')">
          The total size must not exceed {{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').maxSize | byteFormat}}
          ({{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').actualSize
          | byteFormat}}).
        </mat-error>
      </mat-form-field>

**Upload method in component typescript file **

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) => {
        this.inProgress = false;
        this.dialogRef.close(true);
        this.snackBar.open('Press Release Record Added.', null, { duration: 3000 });
      })
      .catch( error => {
        this.inProgress = false;
        this.error = 'There was an error saving the Press Release Record';
      });
  }

** Service method savePressReleaseRecord **

 savePressReleaseRecord(formData: FormData): Promise<PressRelease> {
    console.log("formData pressReleaseData");
    console.log(formData);
    return API.post('serverAPI', '/pressRelease', { body: formData })
    .then(r => r as PressRelease);
  }

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

Any help with this is greatly appreciated

Thanks Damien

Upvotes: 0

Views: 872

Answers (2)

Damien
Damien

Reputation: 4121

Switched to using httpClient instead of @aws-amplify/api and the file uploads now work as expected

Upvotes: 1

Jean Claude ADIBA
Jean Claude ADIBA

Reputation: 143

daterangepicker-material": "^2.1.7",` and it work fine. I suggest you to try to see value of the fileInput by suscribing to valuechanges observable of your formControl. 

this.fileForm.get('basicfile').valueChanges.subscribe(data =>  {
  console.log(data);
});

enter image description here

And after if you try to get the value of the formControl and see it in console you will get such thing. it is not empty ;)

enter image description here

You must see your API request headers in you TypeScript File

API.post('serverAPI', '/pressRelease', { body: formData })

you should create a special post function to send your formdata to the backend without this header

'Accept': 'application/json'

and add this one if necessary 

"Content-Type": "application/octet-stream",

otherwise your backend will consider the content of your post request as Json

Upvotes: 1

Related Questions