Post Form data using AngularJS and Java Spring

Question

I have a jsp file in which i am uploading a file. For backend handling of file i made a controller in spring. But it return error in console: String parameter 'name' is not present ? My Code is -

JSP File

<input class="fileInput" type="file" id="fileInput" accept="image/gif, image/jpeg, image/png" />
<button type="button" ng-click="saveProfile()">Update</button>

JS File

$scope.username = 01238339595;
$scope.saveProfile = function() {
                    var input = document.getElementById('fileInput');
                    if (input.files && input.files[0]) {
                        var formData = new FormData();
                        formData.append("name", $scope.username);
                        formData.append("file", input.files[0]);
                        console.log("form data " + formData);
                        $http.post("save-avatar", formData)
                            .success(function(data, status, headers,config) {
                                                        console.log('Success');
                                                    })
                            .error(function(data, status, headers, config) {
                                                        console.log('Error');
                                                    });
                    }
                };

Controller

@RequestMapping(value = "save-avatar", method = RequestMethod.POST)
public String handleFormUpload(@RequestParam("name") String name, @RequestParam("file") MultipartFile file,
        HttpServletRequest request) throws IOException {
    if (file.isEmpty())
        throw new IOException("File Field is Empty");

    ServletContext servletContext = request.getSession().getServletContext();
    String absoluteDiskPath = servletContext.getRealPath("/");

    File folder = new File(absoluteDiskPath + "/avatar/");
    if (!folder.exists())
        folder.mkdirs();

    File avatarFile = new File(folder, name + ".jpg");
    if (!avatarFile.exists())
        avatarFile.createNewFile();

    FileOutputStream outputStream = null;
    try {
        outputStream = new FileOutputStream(avatarFile);
        outputStream.write(file.getBytes());
    } finally {
        if (outputStream != null)
            outputStream.close();
    }

    return "redirect:/avatar-profile?name=" + name;
}

In my config xml:

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

Answer 1

Instead of the above controller method, use this:

@RequestMapping(value = "/save-avatar", method = RequestMethod.POST)
public void UploadFile(MultipartHttpServletRequest request, HttpServletResponse response) {

    Iterator<String> itr = request.getFileNames();
    MultipartFile file=null;

    while (itr.hastNext()) {
        file = request.getFile(itr.next());
        String name = request.getParameter("name");

        //Do your stuff here.......
    }
}