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(baseUrl)) {
        request = request.clone({
          headers: new HttpHeaders({
            'Request-Date': currentDate.toString(),
            'Request-Id': requestId,                
            "Accept": "application/json" ,
            param1: environment.encriptionEnabled
              ? requestData['param1']
              : 'null',
            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

Did you check answer in stackoverflow.com/questions/56184305/… or stackoverflow.com/questions/31089824/… — Ori Marko
– Ori Marko, Commented Jun 19, 2022 at 7:27
One more finding I have that when I copy my curl and use it in Post-man, to make it work I have to add content-type for each key explicitly . This is same for the curl shared by backend team — Amit
– Amit, Commented Jun 19, 2022 at 7:41

Amit · Accepted Answer · 2022-06-19 19:12:17Z

2

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:

Firstly I removed the content-type mentioned in my httpInterceptor
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"}));

answered Jun 19, 2022 at 19:12

Amit

1,4911 gold badge17 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot POST request multipart/form-data angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related