Java Spring Boot multipart POST request using AngularJS

Question

I am trying to post array of string from front-end using AngularJS to back-end where i am usign spring boot. I tried to do this with multipart but i have some exceptions which i can not fix.

@RestController
@RequestMapping("url")
public class ExportToPdfResource {

    @RequestMapping(value = "/svg", method = RequestMethod.POST, /*headers = "'Content-Type': 'multipart/mixed'",*/
            produces = MediaType.MULTIPART_FORM_DATA_VALUE, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
//    public String svg(@RequestBody String svg) {
      public @ResponseBody String svg(@RequestParam(value="svg", required=true) MultipartHttpServletRequest svg) {

        String result = svg.toString();

        System.out.println("@@@@-SIZE");

        return result;
    }
}

angular code

service.getChartSvg = function(chart) {
    // var charts = [];
    $('#button').click(function () {
        var svg = chart.getSVG();
        // charts.push(svg);
        console.log(svg);

        $http({
            method : "POST",
            url : "/api/dashboard/svg",
            headers: {
                  'Content-Type': 'multipart/mixed'
               },
            data: svg,
            transformRequest: function(data, headersGetterFunction) {
                return data;
            }
        });
    });
}

Exception:

org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.springframework.web.multipart.commons.CommonsMultipartResolver.parseRequest(CommonsMultipartResolver.java:165)
    at org.springframework.web.multipart.commons.CommonsMultipartResolver.resolveMultipart(CommonsMultipartResolver.java:142)
    at org.springframework.web.multipart.support.MultipartFilter.doFilterInternal(MultipartFilter.java:112)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:192)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:165)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:317)
    at org.springframework.security.web.authentication.switchuser.SwitchUserFilter.doFilter(SwitchUserFilter.java:198)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:127)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:91)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:115)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:137)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:111)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:169)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:63)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:200)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
    at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:121)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:331)
Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:990)
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:310)
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:334)
    at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:115)
    at org.springframework.web.multipart.commons.CommonsMultipartResolver.parseRequest(CommonsMultipartResolver.java:158)
    ... 77 common frames omitted

Answer 1

Try Content-Type: multipart/alternative; boundary=boundary42

Multipart should have Boundary specified. Reference https://www.w3.org/Protocols/rfc1341/7_2_Multipart.html

service.getChartSvg = function(chart) {
// var charts = [];
$('#button').click(function () {
    var svg = chart.getSVG();
    // charts.push(svg);
    console.log(svg);
    svg.append('file',file);
    $http({
        method : "POST",
        url : "/api/dashboard/svg",
        headers: {
              'Content-Type': undefined
           },
        data: svg,
        transformRequest: function(data, headersGetterFunction) {
            return data;
        }
    });
});

}

Answer 2

 1. YOU CAN USE BELOW FUNCTION TO PASS DATA PLUS MULTIPART DATA INTO
    SERVER.

   var uploadUrl = "/api/dashboard/svg";

var svg = chart.getSVG();
// charts.push(svg);
console.log(svg);
svg.append('file', file);
svg.append('svg', svg) $http.post(uploadUrl, svg, {
    transformRequest: angular.identity,
    headers: {
        'Content-Type': undefined
    }
}).success(function() {
    console.log('success');


}).error(function() {

    console.log('error');
});