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>

thanks to @Rossi for the controller. On the rest, just change JS code to $http.post("save-avatar", formData, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) — Viet Phan
– Viet Phan, Commented Sep 26, 2015 at 4:15

Rana_S · Accepted Answer · 2015-09-25 21:25:15Z

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.......
    }
}

answered Sep 25, 2015 at 21:25

Rana_S

1,5603 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Viet Phan Over a year ago

excuse me. I have followed your instruction but it return

org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.IllegalStateException: Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest]

Rana_S Over a year ago

Do you have this in the config?? <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/

Rana_S Over a year ago

Make sure you have right dependencies and config setup.

Rana_S Over a year ago

Can you share what you have for the dependency and in the config.xml?

Viet Phan Over a year ago

okay, I edited it on above. I think the problem is JS Code. Is var formData = new FormData(); right? i think we need a multipart form data, not a normal form data

Collectives™ on Stack Overflow

Post Form data using AngularJS and Java Spring

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related