$.AjaxFileUpload is not woking in latest version of Chrome Version 83.0.4103.61 (Official Build) (64-bit)

Question

From the latest version of Chrome Version 83.0.4103.61 (Official Build) (64-bit) Jquery $.AjaxFileUpload is not working, Please help me if anyone has idea, This AJAX call is working fine in Older version of chrome and other browsers like firefox etc.. Only issue with the latest version of chrome Here is the Code:

JSP Code is like

<input type="file" id="fileform-a04d99a8-3cc0-49af-868d-48bdfd26f448" name="files" class="add-attachment-input" style="position: absolute; top: -100000px;" multiple="" >

Javascript:

 $("#fileform-" + code).AjaxFileUpload({
    action: "/claims/post/attachment/",
    onSubmit: function(element, filename) {
            return {jobcode: code};
    },
    onComplete: function(filename, response) {
        mci.claims.handleAttachmentResponse(code, $thisitem, filename, response);
    }
 });

JavaCode:

@RequestMapping(value = "/post/attachment/", method = RequestMethod.POST, produces = "text/html")
@ResponseBody
public String addAttachments(@RequestParam("files")
final List<MultipartFile> files, @RequestParam("jobcode") String jobcode)
{
    jobcode = XSSFilterUtil.filter(jobcode);

    final Map<String, String> result = new HashMap<>();
    for (final MultipartFile file : files)
    {
        result.put(file.getOriginalFilename(), claimsFacade.addAttachmentToClaim(file, jobcode));
    }
    return jsonFacade.mapToJsonString(result);
}

score 4 · Accepted Answer · answered May 26 '20 at 14:59

There is another jQuery plugin that relied on creating an iframe with src="javascript:false" and it seems like chrome 83 doesn't like it anymore (https://github.com/jquery-form/form/issues/571). It looks like (as per the jsFiddle posted there) chrome 83 block the call when using that src attribute value (I have verified it myself with Chrome 83.0.4103.61-1) but dones't block it if the src attribute value is about:blank.

As per the source for the plugin you are using, it creates an iframe with the aforementioned src attribute value (https://github.com/davgothic/AjaxFileUpload/blob/master/jquery.ajaxfileupload.js#L99), and thus the issue. Changing that line into this should solve the issue:

.append('<iframe src="about:blank" name="' + id + '" id="' + id + '" style="display: none;"></iframe>');

Although the plugin hasn't changed much in the last few years (last commit was about 2 years ago), you can do a Pull Request with this change.

Thank you so much for your time and help, your guess is correct and solved my issue. – — Jagadeesh Kumar, May 26 '20 at 18:48
I did the same but for jquery.form (https://github.com/jquery-form/form/blob/master/src/jquery.form.js#L173) It worked very well for me. Thank you for the solution, — Kleber Bernardo, May 27 '20 at 09:20

score 2 · Answer 2 · answered Jun 03 '20 at 21:35

2

FYI jquery upload was broken by the 19-02-2020 Chrome browser update 83.0.4103.61. https://bugs.chromium.org/p/chromium/issues/detail?id=1084874 Fixed in release from 03-06-2020 (83.0.4103.97)... phew.

answered Jun 03 '20 at 21:35

Finne Fortuin

21
1

score 0 · Answer 3 · answered May 26 '20 at 18:41

0

Changed src="about:blank" to src="javascript:false;" in jquery.ajaxfileupload.js, solved my issue

answered May 26 '20 at 18:41

Jagadeesh Kumar

83
1
5

May be the other way around? javascript:false caused the problem, about:blank works. – NPC May 27 '20 at 18:07

$.AjaxFileUpload is not woking in latest version of Chrome Version 83.0.4103.61 (Official Build) (64-bit)

3 Answers3

Linked