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?

try using jQuery Fileupload

EpicPandaForce
– EpicPandaForce

2015-01-26 13:03:17 +00:00
Commented Jan 26, 2015 at 13:03 — EpicPandaForce
– EpicPandaForce, Commented Jan 26, 2015 at 13:03

Roland Mauricio Cruz Velandia · Accepted Answer · 2015-04-09 20:51:49Z

2

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
})

answered Apr 9, 2015 at 20:51

Roland Mauricio Cruz Velandia

615 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user585968 Over a year ago

Generally avoid code-only answers. Consider adding a description that helps to explain your code. Thanks

Biju Kunjummen · Accepted Answer · 2015-04-09 23:23:51Z

0

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.

answered Apr 9, 2015 at 23:23

Biju Kunjummen

50.1k14 gold badges117 silver badges126 bronze badges

Collectives™ on Stack Overflow

Cannot upload file using Angular and Spring Boot

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related