org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

Question

I want to upload a file and post it to my server to get the Response.

In the template I use something like that:

 <form name="myForm" enctype="multipart/form-data">
        <input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" required>
        <button class="btn btn-primary" type="submit" ng-click="upload(picFile)" ng-disabled="!myForm.$valid">Ajouter
    </form>

Here is my Angular Controller and Service:

 $scope.upload = function (files) {
                if (files && files.length) {
                    var file = files[0];
                    BiAddDocFromExternalSourceService.uploadFile(file);
       }
}
// Service:
service.uploadFile = function (file) {
            var fd= new FormData();
            fd.append('file', file);
            return $http.post('ws/bdocument/add_external_document', fd, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': 'undefined'
                }
            });
        };

And in the Server side, I developped a REST Service like that:

@RequestMapping(value = "/add_external_document", method = RequestMethod.POST)
public byte[] retrieveBDocumentThumbnail(@RequestParam MultipartFile file)
        throws AbstractBdocInteractiveException {
//do something....
    return something;
}

Here is the request sent to the server if a put ** 'Content-Type': 'undefined'** :

Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/bdoci-
tablet/ws/bdocument/add_external_document
Request Method:POST
Status Code:500 Erreur Interne de Servlet
Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,ar;q=0.2
Connection:keep-alive
Content-Length:13520
Content-Type:undefined
Cookie:JSESSIONID=25BE1D0F0102A5D3465EFC0644494D71; __ngDebug=true
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/bdoci-tablet/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/39.0.2171.95 Safari/537.36    
Response Headers
Connection:close
Content-Language:fr
Content-Length:4261
Content-Type:text/html;charset=utf-8
Date:Wed, 20 May 2015 11:02:20 GMT
Server:Apache-Coyote/1.1

and it look like that if i put

Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/bdoci-
tablet/ws/bdocument/add_external_document
Request Method:POST
Status Code:500 Erreur Interne de Servlet
Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,ar;q=0.2
Connection:keep-alive
Content-Length:48185
Content-Type:multipart/form-data
Cookie:JSESSIONID=EBDEED7F0EAE46677ABD2B2861FEA2A6; __ngDebug=true
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/bdoci-tablet/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/39.0.2171.95 Safari/537.36
Response Headers
Connection:close
Content-Language:fr
Content-Length:5266
Content-Type:text/html;charset=utf-8
Date:Wed, 20 May 2015 13:12:04 GMT
Server:Apache-Coyote/1.1

Tring this, throw the following Exception :

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

org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

Solution

You need to add this to you spring beans configuration file:

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
</bean>

And add this to pom.xml setting the version you want.

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

Also, edit your JS service to:

service.uploadFile = function (file) {
            var fd= new FormData();
            fd.append('file', file);
            return $http.post('ws/bdocument/add_external_document', fd, {
                transformRequest: angular.identity,
                headers: {
                    {'Content-Type': undefined}
                    // try with: 
                    // {'Content-Type': 'multipart/form-data'}
                    // as well.
                }
            });
        };

You need to make your request multipart, right now it is "undefined".

Comments

[Forgotten Angel]

I used <bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardSer‌​vletMultipartResolve‌​r"> </bean> when I changed by yours it throw me an exception when starting the server: java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory

[Forgotten Angel]

I added the maven dependancy and there is not exception when starting the server, But the MultipartException still thrown

[Fernando Garcia]

How is the request? You can check it by opening browser developer tools, going to the network tab and check the request headers/parameters. Can you post it here? You can edit the first post and add it there.

[Fernando Garcia]

Post the updated request data, check if Content-Type:undefined is undefined or multipart.

[Forgotten Angel]

It stil the same error (500 Erreur Interne de Servlet) and the request is the same except Content-Type:multipart/form-data

[Fernando Garcia]

Can you write again the request you are sending?

[Forgotten Angel]

I added it to my post

[Forgotten Angel]

The exception is changed to org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found