Spring ajax send value but null

Question

I have problem with my ajax posting. Ajax:

    var formData = new FormData();
    formData.append('file', files);
    formData.append("url", url);
    $.ajax({
        url : "/servisDetail/uploadSoubor",
        type : 'GET',
        processData: false,
        contentType: false,
        data : formData,           
        success : function(response) { 
            console.log(response);
            //vypisPrilohy(response);
        },
        error: function (xhr) { }
    });

And java:

@RequestMapping(value = "/servisDetail/uploadSoubor", method= RequestMethod.GET)
public @ResponseBody
ModelMap servisDetailUploadFile(@RequestParam(value = "file",required = false) MultipartFile soubor,
                                @RequestParam(value = "url",required = false) String odkaz,
                                Locale locale){
    ModelAndView model = new ModelAndView();
    System.err.println("File: " + soubor + " and " + odkaz);
    return model.getModelMap();
}

But print to console is: File: null and null.

Without processData: false I have ajax error: Illegal invocation and type get or post is still same

Does anyone know how to fix it?

If you place console.log(files, url) before $.ajax, what does browser console show? — Kosh
– Kosh, Commented Jul 8, 2018 at 20:48
[object File] and SERVISNIPOZADAVEK/1/67 [object File] is output of input type file — Grossik
– Grossik, Commented Jul 8, 2018 at 20:51

Anonymity · Accepted Answer · 2018-07-09 04:55:41Z

1

It is because you didn't append right file to formData. Please refer to How to use FormData for ajax file upload. I tried below code and it passed test without any issue.

<html>
<head>
<title>Test</title>
</head>
<body>
<input type="file" name="file">
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('[name=file]').on('change', function(){
        var formData = new FormData();
        formData.append('file', $(this)[0].files[0]);
        formData.append("url", 'https://stackoverflow.com/questions/51235726/spring-ajax-send-value-but-null');
        $.ajax({
            url : "/servisDetail/uploadSoubor",
            type : 'POST',
            processData: false,
            contentType: false,
            data : formData,           
            success : function(response) { 
                console.log(response);
                //vypisPrilohy(response);
            },
            error: function (xhr) { }
        });
    })
});
</script>
</body>
</html>

I got output like File: org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile@4b5db24c and https://stackoverflow.com/questions/51235726/spring-ajax-send-value-but-null in the console

answered Jul 9, 2018 at 4:55

Anonymity

611 silver badge7 bronze badges

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

6 Comments

Grossik Over a year ago

I copied this code, but I still have output File: null and null in the console.

Anonymity Over a year ago

@Grossik that's weird. My code is base on springboot-2.0.1.RELEASE and tests pass in chrome/IE11. Please give more detail to help with investigation.

Grossik Over a year ago

I have Spring Framework 4.3.8 and Spring Security version 4.2.2 and tests pass in chrome 65.0.3325.181 (64 bit)

Anonymity Over a year ago

I suggest you send a file to that API via some tool(eg. Postman). If it works, that indicates the API are not called in javascript correctly, otherwise, there must be something wrong with the Java code. At least try to narrow the range of fault.

Anonymity Over a year ago

After doing more test, I suspect you haven't configured multipartResolver.

|

Grossik · Accepted Answer · 2018-07-11 15:27:10Z

0

Finally, I did it differently. Thank you.

        $.ajax({
        url : "/servisDetail/uploadSoubor",
        type : 'GET',
        dataType: 'json',
        contentType: 'application/json',
        data : {
            fileSize: files.size,
            fileName: files.name,
            url: url
        },         
        success : function(response) { 
            console.log(response);
            vypisPrilohy(response);
        },
        error: function (xhr) { }
    });

And using ByteArrayInputStream byteArray = new ByteArrayInputStream(new byte[fileSize]);

answered Jul 11, 2018 at 15:27

Grossik

557 bronze badges

Collectives™ on Stack Overflow

Spring ajax send value but null

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related