Question

I have a file upload form. When submitted, the form posts the data to an iframe and then uses jQuery and PECL UploadProgress to get the upload progress of the file. When the script requests the upload progress and the response is null, the file has finished uploading, the script then reads the iframe for information of the file.

The script runs in an interval which is cleared when the response is null.

My problem with the script is that, if the file uploads before the request to the files progress is made, an error will occur because the browser will try to get the value of the property which hasn’t been set (the response would be blank).

How can I check if the file has finished uploading before the script tries to get the value of a property which hasn’t been set?

Is there some way to add a listener of some sort to the iframe so when it finishes loading, I can immediately cancel the interval and display the result?

I have thought to check the content of the iframe before the request and if there is data, cancel the request and display the data, but it doesn’t seem to work.

Error I am getting in IE:

    Line: 37
    Error: Unable to get value of the property 'filename': object is null or undefined

Apologies in advance if this seems a little stupid, I haven’t slept yet working on this project and I can’t find a way to fix this.

function beginUpload()
{
    // Hide the upload form
    $("#uploadContainer").hide(function(){
        $(".fileProgress").show();
    });

    var interval = setInterval(function(){

        $.getJSON("upload.php?uploadProgressKey=" + uploadProgressKey, function(returnData){

            if($("#uploadFrame").contents().find("html body").html() !== "")
            {
                clearInterval(interval);
                $("#content").html($("#uploadFrame").contents().find("html body").html());
            }
            if(returnData == null)
            {
                // Upload complete as there is not data to report about upload
                // Stop the interval of checking the data
                clearInterval(interval);

                // Load result to content div
                $("#content").html($("#uploadFrame").contents().find("html body").html());
            }

            setUploadInformation(returnData.filename, returnData.bytes_uploaded, returnData.bytes_total, returnData.speed_average);
            setUploadBar(returnData.bytes_uploaded, returnData.bytes_total);
        });

    }, 800);
}

Answer 1

Don’t know if this going to work:

function beginUpload() {
    // Hide the upload form
    $("#uploadContainer").hide(function(){
        $(".fileProgress").show();
    });

    var checkProgress = function () {
        $.getJSON("upload.php?uploadProgressKey=" + uploadProgressKey, function(returnData){

            if($("#uploadFrame").contents().find("html body").html() !== "") {
                clearInterval(interval);
                $("#content").html($("#uploadFrame").contents().find("html body").html());
            }
            if(returnData == null) {
                // Upload complete as there is not data to report about upload
                // Stop the interval of checking the data
                clearInterval(interval);

                // Load result to content div
                $("#content").html($("#uploadFrame").contents().find("html body").html());
            }

            setUploadInformation(returnData.filename, returnData.bytes_uploaded, returnData.bytes_total, returnData.speed_average);
            setUploadBar(returnData.bytes_uploaded, returnData.bytes_total);
        });

    }
    var interval = setInterval(checkProgress, 800);
    checkProgress();
}

Your interval first starts after 800ms. I Created the function checkProgress and call it right after you initialize the interval. This way you start checking all at once.

Still i think you can meet the same bug if the first AJAX call (getJSON) is done after the upload?