Question

It’s rather lengthy, TLDR version below crit wall of text.

Setup: Our company had been using prototype for some time, and just recently switched to dojo. I have been converting lots and lots of JS and setting everything back up to normal and then I encountered this issue…

The issue: I have a typical form set up with a upload file field. (I’m not using a dijit, and have tried multiple variations of them – not working for me perhaps in 1.4 I will try again.) Upon pressing the submit button my intentions were to watch the upload progress of the files, in prototype this was a simple ajax.PeriodicalUpdater call (wich is basicly xhrGet/Post that runs over and over and over). Coupled with apc.rfc1867 (example: http://www.phpriot.com/articles/php-ajax-file-uploads/3) this becomes very easy, basicly you post, and use ajax to fetch the current progress of the file.

Here is where I encounter the actual issue… xhrPost() doesn’t seem to want to run after the form goes into what I call ‘submit mode’ (where the page is spooling and uploading). APC actually needs the files to be in the ‘submit mode’ to poll the current progress and return the % via ajax.

What I have tried:
Only one thing has partially worked. Using the onclick=”” calling the xhrPost() imediately followed by return false; The problem with this is that the only way I got it to actually work was to click the submit button, and then click a seperate submit button with return false… I think why this worked is that it started a normal submit, then during the upload process it sent the xhrPost() along with return false;. It’s probably the uploads re-started, but what is sure is that the APC data was being fed into the progress bar, unfortunately this shouldn’t require 2 clicks. Also, it didn’t finish submitting the page either.

I’ve had little success using dojo.connect() to the button or the form.

I’ve had little success using onclick=”” unless return false; is present.

I’ve had little success using dojo.io.iframe to send a seperate request.

I’ve had little success using dojox.file.FileUpload, and presents a large sum of it’s own issues as well.

Code Snippets:

Old Code:

new PeriodicalExecuter(function(pe) {
    if( dojo.byId('progressbar').innerHTML == 'Processing...' ) {
        pe.stop();
    } else if( dojo.byId('progressbar').innerHTML != '' ) {
        dojo.byId('progressbar1').setStyle({
            width: dojo.byId('progressbar').innerHTML + '%'
        });
    }
}, 1);

New Code:

    dojo.xhrPost({
        url: 'ajax/apcProgressBar.php',
        content: { progress_key: dojo.byId( 'progress_key' ).value },
        load: function( data ) {
            dojo.byId( 'progressbar' ).innerHTML = data;
            if( dojo.byId( 'progressbar' ).innerHTML != '' ) {
                dojo.style( 'progressbar1', 'width', dojo.byId( 'progressbar' ).innerHTML + '%' );
              window.setTimeout(this, 2000);
            }
        }
    });
}

APC Handling:

if( isset( $_POST[ 'progress_key' ] ) ) {
if( $status = apc_fetch( 'upload_' . $_POST[ 'progress_key' ] ) ) {
    $progress = ceil( $status[ 'current' ] / $status[ 'total' ] * 100 );
    if ( $progress >= 100 ) {
        echo 'Processing...';
    } else {
        echo $progress;
    }
}
echo '...';

}

TLDR Version: I need a way to submit a form with files to upload, and send xhrPost() at the same time, and nothing I try works. The only other variable is that APC must know about the file trying to be uploaded, and stopping the event seems to hinder this completely.

Answer 1

After playing with this some more I came up with my own solution.

I made a test page that used dojo and prototype. One thing I noticed was that prototype also gave an error in the same situation, this I still don’t understand, however being persistent with the ajax requests will return results, in this instance I used javascripts native setInterval() to continue requesting ajax updates. (I made a custom dojo class)

Hopefully this helps someone, in the future.