Angular JS + Spring 4 : Upload File and Form Data

Question

We are using Spring 4 (Annotation based configuration) and AngularJS for building our application. In one of the usecase, we need to upload a document. On submitting the form, we need to send the form data (apart from file uploaded file, there are fields which are part of the form) and the file content as part of the POST request.

@Bean(name="multipartResolver")
public CommonsMultipartResolver multipartResolver(){
  CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
  return multipartResolver;
}

The HTML form contents:

<form method="post" id="fromFileUpload"
                enctype="multipart/form-data" ng-submit="create()">
                <div class="form-group">
                    <label for="inputValue" class="col-md-offset-2 col-md-4 form-element">Input Value</label>
                    <div class="col-md-6 form-element">
                        <input class="form-control" ng-model="model.value"
                            name="val" required autofocus>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4 col-xs-12" for="file">Please
                        upload the file : <span class="required">*</span>
                    </label>
                    <div class="col-xs-4 input-max controls ">
                        <input class="inline-block" type="file" name="file"
                            ng-model="file" data-rule-required="true" id="file"
                            accept=".xls">
                    </div>
                    <span id="vaildFile" class="text-success icon-ok hide">Valid
                        File</span> <span id="invaildFile" class="text-error icon-remove hide">
                        Invalid File</span>
                </div>
                <div class="box-header">
                    <div class="actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="icon-arrow-right"></i> Create
                        </button>
                    </div>
                </div>
            </form>

Below is the angularJS code :

$scope.create = function() {
    var formData=new FormData();
    formData.append("file",$scope.file);
    formData.append("docData", angular.toJson($scope.model));

    console.log(formData);

    $http({
        method: 'POST',
        url: "http://localhost:8080/saprof/value",
        headers: {'Content-Type': false},
        data: formData,
        transformRequest: function(data, headers) {
            return data;
        }
    })
    .success(function(data, status) {
        alert("Success");

    })
    .error(function(data, status) {
        alert("Error");

    });

};

Below is the controller Code (Annotated with @RestController)

@RequestMapping(value="/saprof/value", method=RequestMethod.POST)
public void createValue(HttpServletRequest request, HttpServletResponse response, HttpSession session){


    LOGGER.info("Request is of type MultiPartRequest "+(request instanceof MultipartHttpServletRequest)); // false
    boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    LOGGER.info("isMultiPart Request : "+isMultipart); // false
}

Problem:

I am getting RequestFacade object as the request object and not MultiPartServletRequest. Hence i am not able to retrieve the form data + file contents from this request.

When see the request which is been sent using browser, below is the content:

Request Payload
------WebKitFormBoundaryzfZtWVlK6xH8aSyf
Content-Disposition: form-data; name="file"

[object Object]
------WebKitFormBoundaryzfZtWVlK6xH8aSyf
Content-Disposition: form-data; name="docData"

{"value":"test"}
------WebKitFormBoundaryzfZtWVlK6xH8aSyf--

Need your help in correcting my mistakes. Let me know if you need any further details. Really appreciate your help.

Regards, Manjunath

Answer 1

I used this module on my own project and it worked like a charm:

danialfarid/ng-file-upload