CODEWITHSUNDEEP
phpajaxbrowser
user2280769
user2280769

Reputation: 210

Best process to handle AJAX file processing on server which takes a long time

i have the below code which displays a form. The uploader div section displays a gif image to tell the user the file is being processed by the server and the div 'outdata' holds the output from the ajax call once the file has been processed. my file takes a long time to process on the server because it carries across a lot of information in it. Lets say the last file took about 12.11 minutes.

my question is, when i upload a small file it works perfectly fine. the response is displayed in the outdata div section. however when the filesize is bigger, seems like the server outputs the file because i get it emailed to me however the browser page doesnt reflect the same. it shows the file is still processing and the image stays on the screen.

1). how long does the browser wait for the ajax to be send back responsetext 2). is there a better way of doing this ?

echo "<form name=\"cre\" id=\"cre\" action=\"#\" method=\"post\" enctype=\"multipart/form-data\">";
    echo "<label for=\"file\">Filename: </label>";
    echo "<input type=\"file\" name=\"file\" id=\"file\" ><br><br>";
    echo "<label for=\"email\">Email: </label>";
    echo "<input id=\"email\" type=\"text\" name=\"email\" maxlength=\"40\"><br><br>";  
    echo "<input type=\"submit\" onclick=\"return validate();\" id=\"submit\" value=\"Submit\">&nbsp;&nbsp;";
    echo "</form>";
    echo "<BR>";
    echo "<div id=\"uploader\"></div>";
    echo "<BR>";
    echo "<div id=\"outdata\">";
    echo "</div>";

this is the ajax call

function validate() 
            {
                var file = $("#file").val();
                if(!file || file == '' || file == null)
                {
                    document.getElementById("outdata").innerHTML="Please select a file";
                    return false;
                }   
                var options = {
                    target: '#outdata',
                    url:'process.php', 
                    data:{
                        accesstype:"cre"
                    },
                    beforeSubmit: function() {
                        $('#uploader').html('<img src="/images/ajax-loader.gif" />');
                        $('input[type=submit]').attr('disabled', true);
                    },
                    success:  function() {

                        $('#uploader').html('');
                        $('input[type=submit]').attr('disabled', false);
                    }
                };
                $('#cre').ajaxSubmit(options);
                return false;   
            }

Upvotes: 2

Views: 332

Answers (1)

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

It's a serverside timeout you're experiencing, not clientside. You haven't implemented an error handler in your Ajax call, so it doesn't see that Apache (and its ilk) terminate a request automatically after 30 or 60 seconds (configurable in apache2.conf).

Upping the maximum request time is an option, but a bad one since it will clog server resources. It's better to handle this asynchronously.

  1. When the file is successfully uploaded return a success code to the Ajax call. This also allows you to provide useful feedback to the end user saying he can now go grab some coffee and wait for processing.
  2. Spawn a background job, or have a cron pick up the file in the queue, and start processing it.
  3. Use a long poll mechanism (or websockets if you're on a roll) to open a longstanding relationship to the server, requesting updates about the process. This can either be "I'm yes/not finished", or even percentile updates on the process. Everything is possible when you start doing things in the background instead of inline.

You can implement the system either with a database (insert a job on upload, let the processing job update status in that table) or with a plain folder-based queuing system (upload to /incoming, cron scans that folder and moves to /processing and deletes when done).

Your webserver and his system load will thank you ;)

Upvotes: 3

Related Questions