AJAX Uploading - Not waiting for response before continuing

Question

I'm using Blueimp's jQuery Uploader (very good it is too btw) and an S3 handler to upload files and then transfer them to S3 via the S3 API (from the PHP SDK).

It works. The problem is, on large files (>1GB) it can take anything up to a a few minutes to transfer (via create-object) onto S3. The PHP file that does this is hung-up until this process is complete. The problem is, the uploader (which utilises the jQuery Ajax method) seems to give up waiting and start again everytime.

I have thought this was related to PHP INI 'max_input_time' or such, as it seemed to wait around 60 seconds, though this now appears to vary. I have upped the max_input_time in PHP INI and others related - but no further.

I've also considered (the more likely) that JS, either in the script or the jQuery method has a timeout. The developer (blueimp) has said there's no such timeout in the front-end script, nor have I seen any and though 'timeout' is referenced in the jQuery Ajax method options, it seems to affect the entire time it uploads rather than the wait for a response - so that's not much use.

Any help or guidance gratefully received.

Answer 1

jQuery docs at http://api.jquery.com/jQuery.ajax/ say:

timeout

Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. In jQuery 1.4.x and below, the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. In Firefox 3.0+ only, script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.

Besides this, it might also be a good idea to check php set_time_limit function and php max memory settings.

Anyway the best approach seems to me to implement the error callback like so

$.ajax('yourScript.php',{
 error:function(jqXHR){  echo this error ... }
});

jQuery docs say:

error callbacks are invoked, in the order they are registered, if the request fails. They receive the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".

This might give you a hint on who (server or client) stopped the transmission.

Hope this helps

Answer 2

Uploading large files in one go can cause all manner of problems. The best thing to do is to split the files into chunks on the client side and then send them up to a server, one chunk at a time, and have the server reassemble the chunks into the original file before pushing it across to S3.

So long as you can use window.FileReader and File.prototype.slice you can use javascripts .split() on a file to cut it up.