Click here to Skip to main content
15,168,971 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
I have just found a bug in some ajax code, where the UI 'hangs' when the size of an uploaded image exceeds a size set in my action filter, or in requestLimits maxAllowedContentLength. Debugging tells me the code below is used to upload the offending image. All other Ajax requests for this project are handled by jQuery ajax, with decent error handling, except this image upload request. In the face of it, I don't see why I can't just replace this old school code with a call to the already tested jQuery ajax code. Is there any reason I can't see, as a real JS noob, for this code still being used?
dataAccess.submitJsonWithFileRequest = function(targetUrl, fileToUpload, onComplete) {
    var formData = new FormData();
    formData.append(fileToUpload.name, fileToUpload);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
              

            var jsonData = jQuery.parseJSON(xhr.responseText);
         
            onComplete(jsonData);
        }
    };
    xhr.open('POST', targetUrl, true);
    xhr.send(formData);
};
Posted

1 solution

In the snippet you've posted, there is nothing out of the ordinary going on - there's no reason why you must keep this in-place instead of moving to jQuery, having said that, the reason your code is hanging is because you are waiting for readyState to be 4 and status to be 200 (success) - if your server is throwing an error because the post size is too big you probably wont get a 200 status code, more likely 500

Instead of converting it to jQuery, you could just add some more checks in place

JavaScript
dataAccess.submitJsonWithFileRequest = function(targetUrl, fileToUpload, onComplete) {
    var formData = new FormData();
    formData.append(fileToUpload.name, fileToUpload);
 
    var xhr = new XMLHttpRequest();
 
    xhr.onreadystatechange = function() {

        // first check that the readyState is 4 (request completed)
        if (xhr.readyState == 4) {

            // now check the status
        	if(xhr.status == 200)
        	{
	            var jsonData = jQuery.parseJSON(xhr.responseText);
	            onComplete(jsonData);
        	} else {
        		// there was an error, so status codes could be 
        		// 404 - file not found 
        		// 500 - Server error 
        		// 0 - Request aborted (browser stopped transfer) 
        	}
        }
    };
    xhr.open('POST', targetUrl, true);
    xhr.send(formData);
};
   
v2
Comments
Brady Kelly 12-Dec-14 11:47am
   
Thanks @ChubbyNinja. Turns out it wasn't hanging, but just exiting the function, without calling onComplete; it doesn't _wait_ for any return, just checks for it. so the loading animation etc. was still showing after calling the function. Turns out I have to ditch the whole thing anyway because IE9 doesn't support FormData.
Chubby Ninja 12-Dec-14 12:10pm
   
That's a bummer! Although you could put a check in place to see if formData is supported - if it is use what you have, and if not use a fallback method
Brady Kelly 12-Dec-14 12:41pm
   
Meh. I'd rather have only one point of failure. I was supposed to go live today and only saw this this morning. It's an inherited project.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900