Question

I am wondering why in my example #1 the alerts fire in the proper order 1, 2 but in example #2 where I add an ajax call does the firing order then become 2,1. Also could anyone suggest how with using an ajax call could I achieve the desired firing order of 1, 2… I am stumped.

Example #1

uploader.bind('BeforeUpload', function (up, file, policy, sinature) {
    //alert('1');

    test();
    function test() {
        alert('1');
    }
});

uploader.bind('UploadFile', function (up, file, policy, signature) {
    test2();
    function test2() {
        alert('2');
    }
});

Example #2

uploader.bind('BeforeUpload', function (up, file, policy, sinature) {
    //alert('1');

    test();
    function test() {
        data = { alc: 'private', bucket: 'PhotojimaDev', file: file.name, key: path };
        $.ajax({
            url: sf.getServiceRoot('photojima') + "Upload/getPolicy",
            type: 'POST',
            data: data,
            beforeSend: sf.setModuleHeaders
        }).done(function (response, status) {
            if (status == "success") {
                policy = response.policy;
                signature = response.signature;
                alert('1');
            }
        }).fail(function (xhr, result, status) {
            alert("Uh-oh, something broke: " + status);
        });
    }
});

uploader.bind('UploadFile', function (up, file, policy, signature) {
    test2();
    function test2() {
        alert('2');
    }
}); 

Answer 1

The ajax in BeforeUpload creates a non-blocking background worker that obviously doesn’t finish until after UploadFile

If you need BeforeUpload to finish first, then you will have to tell $.ajax to not run asynchronously by adding async = false

function test() {
    data = { alc: 'private', bucket: 'PhotojimaDev', file: file.name, key: path };
    $.ajax({
        async: false,
        url: sf.getServiceRoot('photojima') + "Upload/getPolicy",
        type: 'POST',
        data: data,
        beforeSend: sf.setModuleHeaders
    }).done(function (response, status) {
        if (status == "success") {
            policy = response.policy;
            signature = response.signature;
            alert('1');
        }
    }).fail(function (xhr, result, status) {
        alert("Uh-oh, something broke: " + status);
    });
}

Search for async in manual: http://api.jquery.com/jQuery.ajax/