How to slow down Uploadify plugin script voor jQuery

Question

Now if that isn't a weird question, I don't know what is.

But here is the problem: I have a function in my "onSelect" option that has to collect some data (through AJAX) and I have a function in my "onComplete" option that processes the just uploaded files based on the data "onSelect" collected.

However, with very small files, the "onSelect" hasn't finished yet before the upload is complete and the "onComplete" fails because it lacks the necessary data. Bigger files work just fine.

So, I'm looking for a way to stall the upload of the file. To let it start only after the function in onSelect completed fetching the necessary data.

Any ideas?

Here is an example of the function that the onSelect triggers:

var foo = new Array();

function checkDB( event, queueID , fileObj )
{

    $.post( ajax_folder + 'fetchData' ,
            {
                ref: "someValue"
            } ,
            function( data ){

                foo[ queueID ] = data.result;

            } ,
            'json' );

    return true;
}

Answer 1

If I understand this correctly, I think you can add the onComplete function as a callback to the onChange function. That way, the onComplete function will only be called once the onChange has finished executing, something like:

[...].checkDB( event, queueID, fileObj, function(){
/* the onComplete code goes here*/
});

Also, check out the answers to these two question as they pretty much seem to have the solution you're looking for:

1. http://stackoverflow.com/questions/1031674/how-do-i-write-a-jquery-function-that-accepts-a-callback-as-a-parameter
2. http://stackoverflow.com/questions/2070334/pause-before-jquery-ajax-post

Hope this helps !

Answer 2

Solved it by reordering the events. The processing now takes place in the "onAllComplete" and that function checks via a setInterval that the number of pictures in Uploadify's upload directory are the same as the number of uploaded pictures registered by Uploadify. Once the two numbers are equal, the processing starts.

Answer 3

I generally agree with Peter that you should try and tap into the events more elegantly. However, you can (and probably should) extract that code into a function and keep a flag that tells you if it's been called before. Something like this:

    var foo = new Array();
    var flag = false;

    function checkDB()
    {
        $.post( ajax_folder + 'fetchData' ,
                {
                    ref: "someValue"
                } ,
                function( data ){

                    foo[ queueID ] = data.result;
                    flag = true;
                } ,
                'json' );

        return true;
    }

    function onSelectHandler(event, queueID , fileObj){

            checkDB();

    }

function someOnCompleteStuff(){
   if(flag){
      //do oncomplete stuff
   }else{
      // try again later
      setTimeout(someOnCompleteStuff,500);
   }
}

function onCompleteHandler(event, queueID , fileObj){
        someOnCompleteStuff();
    }

Of course you could always check the length of foo instead of using a flag.