Current request is not a multipart request-When i send form data and an object in angular to spring boot

Question

I'm sending a custom Object and formData to Spring boot from angular but an error is thrown -"Current request is not a multipart request".

when i do this everything works fine

Angular

private base_url = "http://localhost:8082";


  addProduct(product:Product,file:File) :Observable<any>
  {
      const headers = new HttpHeaders({
      Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

      let formData = new FormData();
      formData.append("file",file);

    return this.httpClient.post<any>(this.base_url+"/api/addProduct",formData,{headers});
 or 
return this.httpClient.post<any>(this.base_url+"/api/addProduct",product,{headers});

spring(corresponding to the above)

    @PostMapping("/addProduct")
    public void addProduct(@RequestParam("file") MultipartFile file) throws IOException
    {

    }
or
@PostMapping("/addProduct")
    public void addProduct(@RequestBody Product product)
    {

    }

My current implementation is the code below but it doesn't work. I get an error -Current request is not a multipart request. How can i send both Product and formData to spring boot app.I need help. angular

private base_url = "http://localhost:8082";


     //add product
      addProduct(product:Product,file:File) :Observable<any>
      {
          const headers = new HttpHeaders({
          Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

          let formData = new FormData();
          formData.append("file",file);

        return this.httpClient.post<any>(this.base_url+"/api/addProduct",{product,formData},{headers});

      }

spring

 //add product
@PostMapping("/addProduct")
public void addProduct(@RequestBody Product product,@RequestParam("file") MultipartFile file) throws IOException
{
}

Answer 1

your headers should contain "Content-Type": "multipart/form-data"

please add this to your header

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}

Answer 2

Try using xmlHttpRequest instead of httpClient

const formData = new FormData();
//file is your uploaded file
formData.append("file", file) 

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = (e) => {

  if (xhr.status === 200) {
    console.log('SUCCESS', xhr.responseText);
  } else {
    console.warn('request_error');
  }
};

xhr.open('POST', 'UPLOAD_URL', true);
xhr.send(formData);

Make sure your microservice accept multipartfile with key is "file"

Answer 3

You can use for angular code in form data for multipart file and data

const formData = new FormData();

formData.append('file',this.pdfFile,this.pdfFile.name);//append for file

formData.append('key',Value);//append for data
formData.append('key',Value);

eg. formData.append('productName','product.productName);

const headers = new HttpHeaders({
      Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

this.httpClient.post<any>(this.base_url+"/api/addProduct', formData ,headers).subscribe(
  (response) => {
console.log(response); }

spring

@PostMapping("/addProduct")
public void addProduct(@RequestBody Product product)
{

}

you can try this code

Answer 4

if you are going to work with files, you have to add your endpoint to file src\app\jrinterceptor.interceptor.ts

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (
       request.url.endsWith("addProduct")
       ...