Progress bar with APC and Codeigniter - Trouble with IE and Chrome

Question

I am trying to make a progress bar with Codeigniter and APC.

Here's my form :

<form method="post" action="" id="upload_file" enctype="multipart/form-data" target="result_frame">

<input type="hidden" value="<?php echo uniqid(); ?>" id="progress_key" name="APC_UPLOAD_PROGRESS" />

<p><label for="userfile">S&eacute;l&eacute;ctionnez un fichier</label><br />
<input type="file" name="userfile" id="userfile" size="20" />
&nbsp;
<button class="btn btn-primary" type="submit" name="submit" id="submit" value="Submit"><span class="icon-upload"></span>&nbsp;Valider</button></p>  

When the user hits the submit button, it fires the upload process. Here is my "check-progress" function :

function checkProgress() {

$.ajax({
    type: "POST",
    url: "/fbe_upload/index.php/fbeupload/upload_progress",
    async: true,
    dataType: "json",
    data: {
        session_unid: $('#progress_key').val()
    },
    //Success
    success: function(data) {

        //Progress
        liveProgress = data.progress;

        //Progress bar
        $('#progressBar-' + idRow).attr("class", "progress progress-striped active");
        $('#progressBar-' + idRow + " div.bar").css("width", parseInt(liveProgress) + "%");
        $('#td-pc-' + idRow).html(parseInt(liveProgress) + "% téléchargés");

        //END success    
    },
    //Error
    error: function() {
        //Erreur
        alert("Error.");
    }
    //Ajax END   
});

//Progress < 100
if (liveProgress < 100) {
    //Call function again
    setTimeout(checkProgress, 800);
}
//Else
else if (liveProgress === 100) {

    //Progress bar
    $('#progressBar-' + idRow).attr("class", "progress progress-striped active");
    $('#progressBar-' + idRow + " div.bar").css("width", "100%");
    $('#td-pc-' + idRow).html("100% t&eacute;l&eacute;charg&eacute;s");

    //Message
    $('#td-filename-' + idRow).html("<i>Finalisation en cours...</i>");

    //This function manage the end of the upload process (message, buttons,...)
    setTimeout(endUpload, 4800);

    //Else END   
}

else {
    setTimeout(checkProgress, 1200);
}
//checkProgress END
}

And here is my PHP file :

function upload_progress() {

//Key
$key = 'upload_' . $_POST['session_unid'];

$status = apc_fetch($key);
//Progress
$cal = ceil($status['current'] / $status['total'] * 100);

echo json_encode(array('progress' => $cal));

}

So, when the user clicks on "submit", his file is uploaded (I used this to write my upload function) and the function checkProgress is called after 1.5 s.

With Firefox, everything works fine. I've got the right values and the progress bar behaves like I want. With IE and Chrome, it doesn't work properly : for the "Progress" value, IE always returns 420 and Chrome 410. So, it is like the upload process is already finished but it's not. By the way, these values ​​do not correspond to the size of the file, or something else. I don't understand how it is possible that Firefox computes and returns the right value and not the other browsers.

WITH FIREFOX :

Array
(
    [total] => 791309142
    [current] => 113631842
    [filename] => up.rar
    [name] => userfile
    [done] => 0
    [start_time] => 1370864635.9486
)

WITH CHROME :

Array
(
    [total] => 410
    [current] => 410
    [rate] => 22777015.099338
    [filename] => 
    [name] => userfile
    [cancel_upload] => 4
    [done] => 1
    [start_time] => 1370864408.3726
)

In my php.ini I have this :

extension=php_apc.dll

[APC]
apc.enabled = 1
apc.max_file_size = 5000M
apc.rfc1867 = On
apc.mmap_file_mask = C:\wamp\tmp\file_template_%s.tmp
apc.shm_segments = 1
apc.shm_size = 64M
apc.stat=1

Does anybody have a suggestion? It will be much appreciated. Thanks!

Answer 1

I think this is a IE cache issue

try to flag $.ajax request parameters with cache set a false or/and add a timestamp to request

function checkProgress() {

    $.ajax({
        type  : "POST",
        url   : "/fbe_upload/index.php/fbeupload/upload_progress?t=" + (new Date().getTime()),
        cache : false,
    // ....

and add no-cache headers for /fbe_upload/index.php/fbeupload/upload_progress route

header('Expires: Tue, 08 Oct 1991 00:00:00 GMT');
header('Cache-Control: no-cache, must-revalidate');