java jersey servlet hits filter but then stops

Question

I have a jersey servlet that is not connecting. As I trace with debugger, I can see that the servlet's filter (which processes the request header) gets called but after that I lose the trace and the servlet itself (uploadFolder) never gets hit.

HTML

<form id="uploadForm" method="post" enctype="multipart/form-data"> 
<p>Upload project folder: 
<input type="file" id="files" name="files" multiple webkitdirectory /></p>

JS

$('#uploadForm').submit(function(e) {
    var fd = new FormData($('#uploadForm')[0]);
    var url = [my local machine]/GProject/uploadFolder;
    var cookieVal = RemoteJSvar.userId; 
    var auth = ['Super_Complex_Auth', cookieVal];

    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.setRequestHeader('Authorization',auth);
    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            alert(request.responseText);
        }
    }       
request.send(fd);
});

Java

@POST @Path("uploadFolder")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.MULTIPART_FORM_DATA)
public String uploadFolder(FormDataMultiPart multiPart)          
{
    boolean retVal = projects.uploadFolder(multiPart);  //**This never gets hit**
    return "{\"retVal\" : " + String.valueOf(retVal) + "}";
}   

I can trace through the filter and it seems to be working correctly. Does not exit prematurely or abort the request. So where does it go after the filter? The alert(request.responseText) box shows "This page says: " with nothing in it.

I also tried sending the request using jquery.ajax like this:

return jQuery.ajax({
    type: 'POST',
    url: url,                           
    data: fd,
    enctype: 'multipart/form-data',
    processData: false,
    contentType: 'multipart/form-data',
    headers : {
        Authorization: auth
    },  
    error: function(xhr){
        alert("An error occured: status=" +xhr.status + ", statusText=" +xhr.statusText);   
    },
    success: function(data) {
        alert("success!: "+data);   
    }
});

Interestingly, the error alert popped up while the debugger was still in the filter. I wasn't expecting that. Output: status=0, statusText="".

Any the Any suggestions?

Answer 1

The clue to the fix was status=0. Googling on that I found there is an issue with the onSubmit. Consequently I changed it to a button click instead. Here is the new

HTML

             <form id="uploadForm" method="post" enctype="multipart/form-data">
                 <label>Choose folder to upload: </label>
                 <input type="file" id="files" name="files" multiple webkitdirectory class="k-button"/>
                 <p style="margin:0;margin-top:3px"></p>
                <input type="button" id="uploadButton" value="Upload Folder" class="k-button" disabled/>
            </form>

That fixed the status error but there was another error after that (I forget). The fix was to also change the Javascript.

JS

$('#uploadButton').click(function() {
    var file = document.getElementById('files');
    for (var i = 0, f; f = file.files[i]; ++i) {
        console.log(f.webkitRelativePath);
    }
    var fd = new FormData($('#uploadForm')[0]);
    var url = [my local machine]/GProject/uploadFolder;
    var cookieVal = RemoteJSvar.userId; 
    var auth = ['Super_Complex_Auth', cookieVal];

    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.setRequestHeader('Authorization',auth);
    request.onreadystatechange = function() {//Call a function when the state changes.
        if(request.readyState == 4) {
            console.log("responseText=" +request.responseText +", status="+request.status +", statusText="+request.statusText);
        }
    }       
    request.send(fd);
});