0

I have a dev server which revolves angular 2 at localhost: 4200, and tomcat with Spring on localhost: 8080. I try to upload a file to the server in the following manner:

angular code:

uploadAvatar(file:File){
    let xhr = new XMLHttpRequest()
    xhr.open("POST",`http://localhost:8080/api/upload/avatar`)
    xhr.setRequestHeader("Content-Type","multipart/form-data")
    xhr.send(file)
}

Controller code Spring:

@RequestMapping(value = "/api/upload/avatar", method = RequestMethod.POST)
public String uploadFile(MultipartFile file){
    log.info(file);
    return file.getName();
}

But after trying to download a file error appears in the java-console:

org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; 
nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

How do I fix this error?

Thank you.

UPDATE 1

The "duplicate" is used with Spring MVC + JSP, I'm trying to download a file via Ajax. And the version of the decision does not help me given there.

UPDATE 2

Spring Boot(v1.4.3.RELEASE)
I use the java configuration, if you want I will give an example of a full configuration.

Bleser
  • 101
  • 1
  • 7
  • Possible duplicate of [SPRING REST: The request was rejected because no multipart boundary was found](http://stackoverflow.com/questions/17462642/spring-rest-the-request-was-rejected-because-no-multipart-boundary-was-found) – Alex Ciocan Feb 20 '17 at 19:09
  • Possible duplicate of [How do I upload a multipart form in AngularJS?](http://stackoverflow.com/questions/26162132/how-do-i-upload-a-multipart-form-in-angularjs). Generally you need to encode your request as a multipart submission. Specifically [this answer](http://stackoverflow.com/a/26162908/6768037) in the above thread may help. – Jon Sampson Feb 21 '17 at 04:26
  • Which version of spring boot you are using and did u define your own webapp configuration? – rajadilipkolli Feb 21 '17 at 08:59

1 Answers1

0

I found the solution to my problem, I postorabs below describe in detail what I did for this.

As the presentation I use Angular 2, sending the file takes place in the following manner.

uploadFile(file:File){
    let form = new FormData();
    form.append("file",file)

    let xhr = new XMLHttpRequest()
    xhr.open("POST",`${URL}/api/upload/avatar`)
    xhr.send(form)
}

Content-Type and the boundary in this case, are automatically linked.

The following manipulations need to be done on the server Stronie:

Add two bean:

@Bean(name = "commonsMultipartResolver")
public MultipartResolver multipartResolver() {
    return new StandardServletMultipartResolver();
}


@Bean
public MultipartConfigElement multipartConfigElement() {
    MultipartConfigFactory factory = new MultipartConfigFactory();

    factory.setMaxFileSize("10MB");
    factory.setMaxRequestSize("10MB");

    return factory.createMultipartConfig();
}

The controller looks like this:

@RequestMapping(value = "/api/upload/avatar", method = RequestMethod.POST,consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String uploadFile(@RequestPart MultipartFile file){
    log.info(file);
    return file.getOriginalFilename();
}
Bleser
  • 101
  • 1
  • 7