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, Jul 08 '18 at 20:48
[object File] and SERVISNIPOZADAVEK/1/67 [object File] is output of input type file — Grossik, Jul 08 '18 at 20:51

score 1 · Answer 1 · answered Jul 09 '18 at 04:55

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 09 '18 at 04:55

Anonymity

61
1
7

I copied this code, but I still have output File: null and null in the console. – Grossik Jul 09 '18 at 12:18
@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. – Anonymity Jul 10 '18 at 01:48
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) – Grossik Jul 10 '18 at 08:17
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 Jul 10 '18 at 11:26
After doing more test, I suspect you haven't configured `multipartResolver`. – Anonymity Jul 10 '18 at 12:06
Yes, I add: ` commons-fileupload commons-fileupload 1.3.1 commons-io commons-io 2.4 ` to pom.xml and `` to spring-servlet.xml – Grossik Jul 10 '18 at 13:04

score 0 · Accepted Answer · answered Jul 11 '18 at 15:27

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]);

Spring ajax send value but null

2 Answers2