Cannot POST request multipart/form-data angular

Question

I am trying to post formData through angular code. I am using httpInterceptor for adding request headers.

Here goes my code:

httpInterceptor ---

if (request.url.includes(srConstants.baseEmailNotification + srConstants.apiUrls.sendEmail)) {

        let interactionIdForAm: any = JSON.parse(sessionStorage.getItem('interactionId'));
        interactionIdForAm = interactionIdForAm ? interactionIdForAm.toString() : '';
        request = request.clone({
          headers: new HttpHeaders({
            'Request-Date': currentDate.toString(),
            'Request-Id': requestId,
            Opco: srConstants['opco'],
            Lang: srConstants['language'],
            'Content-Type': 'multipart/form-data',
            Authorization: token ? 'Bearer ' + token['accessToken'] : undefined,
            'x-app-name': environment.csPortalConfig.xAppName,
            'x-app-type': environment.csPortalConfig.xAppType,
            'x-app-version': environment.csPortalConfig.xAppVersion,
            'x-channel': environment.csPortalConfig.xChannel,
            'x-client-id': environment.csPortalConfig.xClientId,
            'x-api-key': environment.csPortalConfig.xApiKey,
            'x-service-id': environment.csPortalConfig.xServiceId,
            'sr-client-id': this.getSRClientId(request),
            "Accept": "application/json" ,
            param1: environment.encriptionEnabled
              ? requestData['param1']
              : 'null',
            Interaction: interactionIdForAm,
            locale: 'en',
          }),
          body: environment.encriptionEnabled
            ? requestData.ciphertext
            : request.body
        });
      }

Using postman I am able to post correctly. But through code it gives error.

Looks like I am doing something wrong. Any help will be highly appreciated.

Thanks

controller method ---

@PostMapping(value = RequestURIConstant.SEND_EMAIL_WITH_ATTACHMENT, consumes = { MediaType.APPLICATION_JSON_VALUE, MediaType.MULTIPART_FORM_DATA_VALUE })
public void sendEmailWithAttachment(@RequestPart("request") String request, @RequestPart("file") MultipartFile file) {
  EmailNotificationRequest emailRequest = externalNotification.getJson(request);
  LOG.info("Request received to send email");
  externalNotification.sendMail(emailRequest, file);
}

Error logged on server ---

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

If I remove Content-Type as suggested on some posts then I get unsupported media type error

Answer 1

After spending nights I was able to fix this. The main issue was my content-type and the way I was creating formData object.

Here is my changes which worked:

1. Firstly I removed the content-type mentioned in my httpInterceptor

2. Since i needed to mention content-type for each part of the multipart request. I constructed using blob as blob gives us priviledge to specify content-type

---

let formData = new FormData();
formData.append('request', new Blob([JSON.stringify(obj)],{type: "application/json"}));