Cannot upload file using Angular and Spring Boot

Question

I'm trying to upload a file with AngularJS and Spring Boot controller. I have 2 problems:

1) When I use an HTML form 'submit' I get exceeded size even though I have set the max size of file to 128M. The code looks like this:

public class AppConfig {
    @Bean
    public MultipartConfigElement multipartConfigElement() {
        factory.setMaxFileSize("128MB");
        factory.setMaxRequestSize("128MB");
        return factory.createMultipartConfig();
    }
}

It seems that Spring ignores these settings.

2) When I'm trying to upload a file, I get the error:

org.springframework.web.multipart.MultipartException: The current request is not a multipart request

The Angular controller looks like this:

 $scope.uploadFile=function(){
     var formData=new FormData();
     formData.append("file",file.files[0]);

     $http.post('/content-files/upload /',  file.files[0], {

         transformRequest: function(data, headersGetterFunction) {
                return data; // do nothing! FormData is very good!
            },
         headers: {'Content-Type': undefined }

     })
     .success(function(){
         console.log('Post Succeded !');
     })
     .error(function(){
         console.log('Post Failed .');
     });
}

and the Spring controller looks like this:

@RequestMapping(value = "/content-files/upload/", method = RequestMethod.POST  )           
public @ResponseBody String handleFileUpload(  @RequestParam("file") MultipartFile file) {
    System.out.println("BrandController.uploadMultipart()");

    String name=file.getName();
    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            BufferedOutputStream stream =
                          new BufferedOutputStream(new FileOutputStream(new File(name)));
            stream.write(bytes);
            stream.close();
            return "You successfully uploaded " + name + "!";
        } catch (Exception e) {
            return "You failed to upload " + name + " => " + e.getMessage();
        }
    } else {
        return "You failed to upload " + name + " because the file was empty.";
    }
}

I tried changing the JS controller to:

$http.post('/content-files/upload /',  file.files[0], {         
    headers: { 'Content-Type': undefined },
    transformRequest: angular.identity
})

but I get the same error as above. When I try changing the JS controller to:

headers: { 'Content-Type': 'multipart/form-data' },
          transformRequest: angular.identity

I get the error the request was rejected because no multipart boundary was found .

It seems that I have tried all combinations with the parameters, and still nothing worked. What do I need to do to get this file upload to work?

Answer 1

Try with this:

var formData = new FormData();
formData.append('file',file.files[0]);

$http.post('/content-files/upload /',  formData, {         
    headers: { 'Content-Type': undefined },
    transformRequest: angular.identity
})

Answer 2

Based on the MultipartAutoConfiguration code, the way to increase the size limit on uploads (by default max is 1 MB) with Spring Boot is the following properties:

multipart.maxFileSize=129Mb
multipart.maxRequestSize=129Mb

Regarding jquery multipart uploads, the way you are doing it does not appear correct, there are other good references that you can check for, I have seen plenty within Stackoverflow itself.