Angular 8 sending multipart/form-data to Java backend

user_12859951 0
Viewed 1745

I am trying to create a service where a user will be able to fill out a form(all string data) and upload a file with it. For the frontend we are using Angular 8 and for the backend we are using Java. We have it set up using JBOSS but I don't know if that makes a difference here. When trying to submit we are getting a few errors that we are unable to fix. After doing many trial and error tests we are unsure of what to do.

  • Frontend method frontend method
  • Method that calls independentBusiness method call
  • Frontend file

file

  • Backend endpoint backend endpoint

When we leave the content type as undefined(no options specified in post method) we get: "415 Unsupported media type content-type application/octet-stream not supported" 415 error

If we set the content type specifically to undefined via options, it says cannot read property "length" of undefined

When we set the content type to multipart/form-data we get: "Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found" We've tried to set a boundary with it as well but it doesn't seem to work.

The method being used multiOptions and the error boundary not set Any suggestions would be greatly appreciated. If you need any other info let me know and I'll provide it.

Thanks!

angular8 multipartform-data java
3 Answers

I am unable to see you using the HttpHeaders in your code from the images you have provided.

Include an HttpOptions object within the request like so: 

var requestHeaders = new HttpHeaders();
requestHeaders.append('<key>', '<media type>');

const httpOptions = {
  headers: requestHeaders
};

this.http.post<any>(url, body, httpOptions).subscribe()

Post Request Angular Docs

user_29644150

Just as a solution to our issues with multipart, we ended up just attaching the file in the JSON with fileName, mimeType, and contentBase64Encoded and sending it all as one string. We were unable to get multipart to work and this was the solution for us. Posting this just in case someone else runs into the same issue.

user_128599510

We are using Angular 11 with a Spring backend Java endpoint and got this working thanks to [@Hardik]

We had the exact same issue as listed above and are using built in Angular HTTP client

The key is right here

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

got it working below with semi full code listed:

submit() {
    const formData = new FormData();

//append the document to the form data however could also grab it from outside the form value if using validators

    formData.append('file', this.myForm.get('fileSource').value);

    var json = {
        "customer": {
            "contact": {
                "firstName": "Cecilia",
                "lastName": "Chapman",
                "emailAddress": "foo@bar.com",
                "phoneNumber": "1111111111",
                "extension": "123",
                "phoneType": "HOME",
                "email": true
            },
            "address": {
                "addressLine1": "711 2880 Nulla St",
                "addressLine2": "Mankato Mississippi 96522",
                "city": "NoWhere",
                "state": "PA",
                "zipcode": "15001",
                "country": "USA"
            },
            "organization": "Foundation"
        },
        "details": {
            "eventDate": "2021-08-28T23:13:00",
            "usedFor":"Education",
            "comments":"Thank you!"
        }
    };
    
    formData.append("request", new Blob([JSON.stringify(json)], {
        type: "application/json"
    }));

    this.http.post('http://localhost:8080/forms/request', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }
user_118719500
Related