Qfyilyi

I am having some issues trying to upload multiple files together with JSON Object from Angular to Spring boot backend. Am receiving some errors from the server that says i can't pass the data. Here is my code::

=========== Angular Frond-End ==========

/// Product class

export class Product {

  name: string;

  title: string;

  oldPrice: number;



  constructor(name: string, title: string) {}

}

// Service

export class ProductService {

  options = {headers: new HttpHeaders({'Accept': 'multipart/form-data'})};



  constructor(private http: HttpClient) {}



  saveProduct(formData: FormData) {

    return this.http.post<Product>(SERVER-URL, formData, this.options)

                .pipe(catchError(this.handleError<any>('saveProduct()')));

  }



  private handleError<T> (operation = 'operation', result?: T) {

    return (error: any): Observable<T> => {

      console.error(error);

      return of(result as T);

    };

  }

}

// Component

export class AddProductComponent implements OnInit {

  name: FormControl;

  title: FormControl;

  oldPrice: FormControl;



  productForm: FormGroup;



  productImages = ;



  constructor(private productService: ProductService) {}



 ngOnInit() {

    this.name = new FormControl('');

    this.title = new FormControl('');

    this.oldPrice = new FormControl('');



this.productForm = new FormGroup({name: this.name,

                                               title: this.title, oldPrice: this.oldPrice});







saveProduct(productForm) {

    this.product = {id: null, categoryId: '5958f308-16d0-4d77-8faa-db7e4eb49c3d', companyId: 'b7fd2cb2-dfb1-4650-b7b3-8bd198de9614',

                    name: productForm.name, title: productForm.title, oldPrice: productForm.oldPrice,

                    newPrice: productForm.newPrice, discount: productForm.discount,

                    description: productForm.description, url: productForm.url, startDate: productForm.startDate,

                    endDate: productForm.endDate, published: productForm.published};

    const formData: FormData = this.prepareDataForSave(this.product);

    this.productService.saveProduct(formData).subscribe(data => {

    });

  }



  private prepareDataForSave(product: Product): FormData {

    const formData: FormData = new FormData();

    const blob = new Blob([JSON.stringify(product)], {

      type: 'application/json',

    })

    formData.append('product', blob);

    // formData.append('product', JSON.stringify(product));

    if (this.productImages.length > 0) {

      this.productImages.forEach(image => formData.append('images', image.content));

    }

    return formData;

  }

}

/// SERVER

// DTO

public class ProductDTO {

    private String name;

    private String title;

    private double oldPrice;

    // GETTERS AND SETTERS

}

Spring Controller Signature ::

// First Option -- using: @RequestPart

@PostMapping(path=CREATE)

    public ResponseEntity<?> save(@RequestPart("images") MultipartFile files, @RequestPart("product") ProductDTO dto){

        logger.info("n Logger______________product___");   



.............

}

// Second Option -- using: RequestParam

@PostMapping(path=CREATE)

    public ResponseEntity<?> save(@RequestParam("images") MultipartFile files, @RequestParam("product") ProductDTO dto){

        logger.info("n Logger______________product___");   



.............

}

These are the errors i get::

(1)

When i use formData.append('product', JSON.stringify(product));

with First option of my controller i get the following errors in my browser console::

Object { headers: {…}, status: 415, statusText: "Unsupported Media Type", url: "http://localhost:4200/server/promotion/products/product/save", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/server/promotion/products/product/save: 415 Unsupported Media Type", error: null }

-- 415 Unsupported Media Type" in the message

(2)

when i use formData.append('product', blob);

with First option of my controller i get the following errors in my browser console::

Object { headers: {…}, status: 400, statusText: "Bad Request", url: "http://localhost:4200/server/promotion/products/product/save", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/server/promotion/products/product/save: 400 Bad Request", error: null }

-- 400 Bad Request" in the message

(3)

When i use formData.append('product', JSON.stringify(product)); and Second option of the controller i get a much bigger error message but the most important section of the message is ::

The server encountered an unexpected condition that prevented it from
fulfilling the
request.

Exception

org.springframework.web.method.annotation.MethodArgumentConversionNotSupportedException:

Failed to convert value of type 'java.lang.String' to required type

'com.shopcheap.model.dto.ProductDTO'; nested exception is

java.lang.IllegalStateException: Cannot convert value of type

'java.lang.String' to required type

'com.shopcheap.model.dto.ProductDTO': no matching editors or

conversion strategy

foundrntorg.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:124)rntorg.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:121)rntorg.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:158)rntorg.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:128)rntorg.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:97)rntorg.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:827)rntorg.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:738)rntorg.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)rntorg.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:967)rntorg.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:901)rntorg.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:970)rntorg.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:872)rntjavax.servlet.http.HttpServlet.service(HttpServlet.java:661)rntorg.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:846)rntjavax.servlet.http.HttpServlet.service(HttpServlet.java:742)rntorg.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)rntorg.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.HttpPutFormContentFilter.doFilterInternal(HttpPutFormContentFilter.java:108)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:81)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:197)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rn

Root
Cause

java.lang.IllegalStateException: Cannot convert

  value of type 'java.lang.String' to required type

  'com.shopcheap.model.dto.ProductDTO': no matching editors or

  conversion strategy

  foundrntorg.springframework.beans.TypeConverterDelegate.convertIfNecessary(TypeConverterDelegate.java:306)rntorg.springframework.beans.TypeConverterDelegate.convertIfNecessary(TypeConverterDelegate.java:108)rntorg.springframework.beans.TypeConverterSupport.doConvert(TypeConverterSupport.java:64)rntorg.springframework.beans.TypeConverterSupport.convertIfNecessary(TypeConverterSupport.java:47)

(4)

When i use formData.append('product', blob) and Second option of the controller i get again a much bigger error message but the most important section is::

Failed to convert value of type
'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile'
to required type 'com.shopcheap.model.dto.ProductDTO'; nested
exception is java.lang.IllegalStateException: Cannot convert value of
type
'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile'
to required type 'com.shopcheap.model.dto.ProductDTO': no matching
editors or conversion strategy found

Description The
server encountered an unexpected condition that prevented it from
fulfilling the
request.

Exception

org.springframework.web.method.annotation.MethodArgumentConversionNotSupportedException:
Failed to convert value of type
'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile'
to required type 'com.shopcheap.model.dto.ProductDTO'; nested
exception is java.lang.IllegalStateException: Cannot convert value of
type
'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile'
to required type 'com.shopcheap.model.dto.ProductDTO': no matching
editors or conversion strategy
foundrntorg.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:124)rntorg.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:121)rntorg.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:158)rntorg.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:128)rntorg.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:97)rntorg.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:827)rntorg.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:738)rntorg.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)rntorg.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:967)rntorg.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:901)rntorg.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:970)rntorg.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:872)rntjavax.servlet.http.HttpServlet.service(HttpServlet.java:661)rntorg.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:846)rntjavax.servlet.http.HttpServlet.service(HttpServlet.java:742)rntorg.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)rntorg.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.HttpPutFormContentFilter.doFilterInternal(HttpPutFormContentFilter.java:108)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:81)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rntorg.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:197)rntorg.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)rn

Root
Cause

java.lang.IllegalStateException: Cannot convert
value of type
'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile'
to required ty

I have spent days trying and googling to get it work but it won't so i decided to come here for a little ideas. I have also read some Q&A's here relating to this topic but none of them seems to work for me. For instance this and that posts.

Any help would be appreciated.
thanks