Multipart File Upload using AngularJS and SpringMVC

Question

I am new to angularJS and trying to upload a file using angular JS and Spring MVC, but not able to get the required solution and ending up with exceptions in JS Controller.

Answer 1

update your request mapping with the following code:

 @RequestMapping(value = "/upload-file", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

It will remove your multipart exception.

Answer 2

Add these .js file where you have added angular.js files angular-file-upload.js,angular-file-upload-shim.js,ng-file-upload.js,ng-file-upload-shim.js

You can download from this link Angular File For Upload.

Then Add ngFileUpload,'angularFileUpload' in angular.module see below line.

angular.module('formSubmit', [ 'ngFileUpload',
            'angularFileUpload',  'ui.router' ]);

Then Add $upload in your angular controller like this.

app.controller('FormSubmitController', function($scope, $http, $upload)

Use $upload.upload instead of $http.post in your angular code.

$upload.upload({
    url : 'doAddQuestion.do',
    file : yourFile,
    data : $scope.questionBean,
    method : 'POST'
});

Change your spring controller.

@RequestMapping(value = "/doAddQuestion.do", method = RequestMethod.POST, headers = ("content-type=multipart/*"))
public @ResponseBody String saveUserDataAndFile(@RequestParam("file") MultipartFile file, QuestionBean questionBean) {
    System.out.println("output: "+questionBean.getQuestion_text());
            // Im Still wotking on it
    return "";
}