Need FineUploader Method uploadStoredFiles to Complete Before Proceeding

问题

For some quick background, uploadStoredFiles() is a method used in the FineUploader plugin to asynchronously send attached file data to a server path. I'm also using AngularJS for my application. My question is actually very similar to the one found here...

jQuery: wait for function to complete to continue processing?

... the big difference is that I don't have access to the callback function itself. Also, my script is running FineUploader as part of a larger form where attachments are optional, so using a FineUploader 'completed' callback won't help much either.

Here's a code sample. Basically, if there are no attachments then the page should reload. If there are attachments, they should be uploaded, and THEN the page should reload.

if(hasAttachments)
{
    myuploader.uploadStoredFiles();
}

//AngularJS call to refresh page
$route.reload();

Most of the time, the page refreshes itself and the file is missing from its list until I do an additional refresh later on. I could hard code a wait time, but something about that seems inefficient and evil.

Any suggestions or solutions would be welcome. I would especially love an Angular-ish solution, but I'll take what I can get.

回答1:

My attempt at summarizing my comments into a cohesive answer:

Fine Uploader has events that run code when certain things happen such as when a file is submitted to the uploader (onSubmit) or when a file has uploaded (onComplete).

The vanilla JavaScript would look something like,

$(document).ready(function() {

    $("#triggerUpload").click(function () {
        $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    });

    function submitForm () { 
        if ($(this).fineUploader('getInProgress') == 0) {
            var failedUploads = $(this).fineUploader('getUploads', 
                { status: qq.status.UPLOAD_FAILED });
            if (failedUploads.length == 0) {    
                // do any other form processing here
                $("#uploader").submit();
            }
        }
    };

    // Instantiate a Fine Uploader instance:
    $("#manual-fine-uploader").fineUploader({
        autoUpload: false,
        request: {
            endpoint: "/uploads_bucket"
        }
    }).on("complete", function (event, id, name, response) {
        submitForm.call(this);
    }).on('statusChange', function (event, id, oldStatus, newStatus) {
        if (newStatus === qq.status.CANCELLED) {
            submitForm.call(this);
        } 
    });
});

You can use this Angluar example as a starting point for making a Fine Uploader directive.

来源：https://stackoverflow.com/questions/20506840/need-fineuploader-method-uploadstoredfiles-to-complete-before-proceeding

标签

javascript

jquery

angularjs

asynchronous

fine-uploader