TypeError: Cannot read property 'open' of undefined File Upload Spring MVC JQuery AJAX

Question

I am trying to upload a file from client to server. Using SpringMVC along with JQuery for this process. File Upload process triggered by a button click which runs a Javascript function. I always get "TypeError: Cannot read property 'open' of undefined" from Javascript.

HTTP Request stopped at Client(Browser).

<input id="fileUploadButton" type="button" onclick="fileUploadFunction()" value="Upload">

Javascript Function

function fileUploadFunction() {



    if(!$('#fileupload').val()){
        console.log('No File Selected');
        $('#fileUploadStatus').val('File Required');
        return;
    }

    var uploadedFile = $('#fileupload')[0].files[0];

    var uploadFileFormData = new FormData();
    uploadFileFormData.append('uploadedFile', uploadedFile);

    $.ajax({

        url : 'fileUpload',
        type : 'POST',
        //dataType : 'text',
        //dataType : 'multipart/form-data',
        //enctype : 'multipart/form-data',
        processData : false,
        contentType : false,
        mimeType: 'multipart/form-data',
        data : uploadFileFormData,
        /* data : {
            uploadedFile : $('#fileupload')[0].files[0]
        }, */
        beforeSend : function() {
            $('#fileUploadStatus').val('');
        },
        success : function(reply) {
            console.log(reply);
        },
        error : function(xhr) {
            console.log(xhr);
        },
        complete : function(reply) {
            $('#fileUploadStatus').val(reply);
        },
        xhr : function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    percentComplete = Math.round(percentComplete);
                    console.log(percentComplete);
                }
            }, false);
        }

    });

}

Spring MVC Controller

@RequestMapping(value = "fileUpload", method = RequestMethod.POST)
public @ResponseBody String fileUpload(ModelMap model, HttpServletRequest request,
        @RequestParam(name = "uploadedFile") MultipartFile uploadedFile) {

When i debug in Browser, i can see uploadFileFormData not appended.

new FormData(); is not working with plain text also.

JQuery : jquery-3.1.1.min.js .

This worked when i used var xhr = new XMLHttpRequest; but i need to handle Ajax Request using scenarios like BeforeSend , Success , error , Complete ...

var xhr = new XMLHttpRequest;
xhr.open('POST', 'fileUpload', true);
xhr.send(uploadFileFormData);

Here also, uploadFileFormData is empty.

Answer 1

Add a return at the end of your function. If you don't, then the xhr object that the request is trying to use will be undefined. That should be the source of your error. See code below.

     xhr : function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                percentComplete = Math.round(percentComplete);
                console.log(percentComplete);
            }
        }, false);
        return xhr;//add this line. doing so fixed it for me.
    }