Looping through array - What is going wrong?

Question

I've been looping through an array to upload images to my server using the phonegap fileTransfer methods but for whatever reason, I can't figure out how to trigger an event after all the files have finished uploading. It seems as though my iteration counter (i in the example below) is reaching the max limit (results.length) right away, and the event is firing each iteration. You can see that I have set up the condition for the event to occur when the last image has uploaded to 100% and the iteration has reached the end of the array. However the alert event is coming after every image is uploaded instead of once at the end.

What am I doing wrong?

Here is the code:

$("#btn_upload").click(
function() {
    window.imagePicker.getPictures(function(results) {

        $("#uploadingContainer").css("display", "block");

        for (var i = 0; i < results.length; i++) {
            var serverUrl = 'http://www.example.com/myuploadhandler.php';
            var imageURI = results[i];
            var options = new FileUploadOptions();
            var params = {};
            options.fileKey = "file";
            options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
            options.mimeType = "image/jpeg";
            options.chunkedMode = false;

            var ft = new FileTransfer();
            var statusDom = document.querySelector('#uploadingProgressText');


            ft.onprogress = function(progressEvent) {
                if (progressEvent.lengthComputable) {
                    var perc = parseInt(
                            (progressEvent.loaded / progressEvent.total) * 100, 10);
                    //hack to get the apparent hangup at 99% to 100%
                    if (perc >= 99) {
                        perc = 100;
                    }
                    statusDom.innerHTML = perc + "% uploaded...";

                    if (perc == 100 && i == results.length-1) {
                        alert("Complete");  // <--- this fires every iteration of the array instead of only after the last iteration.  How did i get to be results.length already?

                        /* This is the event I eventually want to happen
                         * $(':mobile-pagecontainer').pagecontainer(
                         * 'change', '#thispage', {
                         * allowSamePageTransition : true, transition :
                         * 'pop', changeHash : false, reverse : false,
                         * showLoadMsg : false });
                         */

                    }
                } else {
                    if (statusDom.innerHTML == "") {
                        statusDom.innerHTML = "Loading";
                    } else {
                        statusDom.innerHTML += ".";
                    }
                }
            };

            ft.upload(imageURI, serverUrl, function(r) {
                // console.log("Upload successful: "
                // + r.bytesSent + " bytes uploaded.");
            }, function(error) {
                console.log("Upload failed: Code = " + error.code);
            }, options);
        }
    });
});

In this loop `for (var i = 0; i < results.length; i++)`, how can `i == results.length` ever be `true`? — connexo, Aug 10 '15 at 12:59
@connexo: No, it runs until that condition is false. Which is when `i == results.length` — Bergi, Aug 10 '15 at 13:01
@connexo: Notice that `ft.onprogress` is an asynchronous callback — Bergi, Aug 10 '15 at 13:02
@Bergi Sure, so `i == results.length` will never evaluate to `true` inside the loop. — connexo, Aug 10 '15 at 13:02
@connexo: Right. But in this case, it is not evaluated within the loop — Bergi, Aug 10 '15 at 13:03
The function is being defined inside the loop, so why do you think it's not evaluated "within the loop"? — connexo, Aug 10 '15 at 13:04
@connexo `ft.onprogress` is an asynchronous callback, so it will be evaluated after the loop reach the end, so `i == result.length` — Hacketo, Aug 10 '15 at 13:06
My apologies, I had originally set it up as if (perc == 100 && i == results.length-1) {...} but had messed with it for troubleshooting. I have edited the question to reflect the actual condition. The point remains, the event is firing every iteration vice at the end. — tllewellyn, Aug 10 '15 at 13:09

Looping through array - What is going wrong?

0 Answers0