Upload File from Angular Client to Spring Rest

Question

I am trying to upload a file with Angular and send it to my rest backend Spring. For my angular service, I used the settings here.But I am having 2 issues:

The first one: when I send large zip file: I have this error in my browser: net::ERR_CONNECTION_RESET; it seems that Angular is not able to send the file to the rest client.

The second one: when my zip file is not too big, the first error is bypassed, but this time, I have this error returned from the rest api: 415 (Type de Support Non Supporté).

service Angular

deployement(file: File): void {
    console.log("service angular");
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data')
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    this.http.post(URL_API_REST + 'upload', formData, options)  
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
        data => console.log('success'),
        error => console.log(error)
      )
  }

my spring rest

@RequestMapping(value = "upload", headers = ("content-type=mulitpart/*"), method = RequestMethod.POST)
    @ResponseBody
    public HashMap<String, String> uploaderDeploiement(@RequestBody MultipartFile fichierZip){
//java code here
}

Could anyone point out what I am doing wrong?

score 0 · Answer 1 · answered Apr 28 '17 at 08:29

0

I think @RequestBody is wrong for file upload.

Try

public HashMap<String, String> uploaderDeploiement(@RequestParam(value = "file", required = true) final MultipartFile file){}

Or

public HashMap<String, String> uploaderDeploiement(MultipartHttpServletRequest request){}

and then get MultipartFile from MultipartHttpServletRequest

answered Apr 28 '17 at 08:29

Matej Marconak

1,365
3
20
25

i changed my method this way: `public HashMap uploaderDeploiement(MultipartHttpServletRequest request){System.out.println("something"); MultipartFile fichierZip = request.getFile("file");}` But still the same problem. In fact the java code is not executed at all – edkeveked Apr 28 '17 at 11:22

score 0 · Answer 2 · answered Apr 28 '17 at 09:34

You can refer this code for file upload as its working fine on myside.

java Code

  @RequestMapping(value = "/upload", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA)
    public URL uploadFileHandler(@RequestParam("name") String name,
                                 @RequestParam("file") MultipartFile file) throws IOException {

/******* Printing all the possible parameter from @RequestParam *************/

        System.out.println("*****************************");

        System.out.println("file.getOriginalFilename() " + file.getOriginalFilename());
        System.out.println("file.getContentType()" + file.getContentType());
        System.out.println("file.getInputStream() " + file.getInputStream());
        System.out.println("file.toString() " + file.toString());
        System.out.println("file.getSize() " + file.getSize());
        System.out.println("name " + name);
        System.out.println("file.getBytes() " + file.getBytes());
        System.out.println("file.hashCode() " + file.hashCode());
        System.out.println("file.getClass() " + file.getClass());
        System.out.println("file.isEmpty() " + file.isEmpty());

        /*************Parameters to b pass to s3 bucket put Object **************/
        InputStream is = file.getInputStream();
        String keyName = file.getOriginalFilename();
}

Angular js

var form = new FormData();
form.append("file", "image.jpeg");

var settings = {
 "async": true,
 "crossDomain": true,
 "url": "http://url/",
 "method": "POST",
 "headers": {
   "cache-control": "no-cache"
 },
 "processData": false,
 "contentType": false,
 "mimeType": "multipart/form-data",
 "data": form
}

$.ajax(settings).done(function (response) {
 console.log(response);
});

I added `consumes = MediaType.MULTIPART_FORM_DATA_VALUE` to my method in rest controller but it didn't solve it — edkeveked, Apr 28 '17 at 11:08
Do you mean the dependencies for MediaType? If so, yes I did! — edkeveked, Apr 28 '17 at 12:36
I wish you can, but my internet access has some restrictions. So it won't work. Rather I will push my project on github and put the link here. I can't do it now, but I will do that in a while. — edkeveked, Apr 28 '17 at 15:07

score 0 · Accepted Answer · answered May 05 '17 at 03:15

Some entries were missing in my spring configuration files and in my pom.xml.

pom.xml

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

In my dispatcher-servlet.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="536870912"/>
    </bean>

Rest Api

public HashMap<String, String> uploaderDeploiement(@RequestParam MultipartFile file){
//java code here
}

Hope, it will help someone!

Upload File from Angular Client to Spring Rest

3 Answers3