embedded iframe form used to upload files. Doesn't work on first submit, works on second.

Question

I have an embedded iframe form which takes a file from a type="file" form field and uploads it using a progress bar:

<form action="sell_upload.php" method="post" id="uploadform" enctype="multipart/form-data">
    <input type="hidden" name="UPLOAD_IDENTIFIER" id="progress_key" value="<?= $uuid ?>" /> 
    <input type="hidden" name="uploaded" value="yes" />    
    <input type="hidden" name="MAX_FILE_SIZE" value="2097152" />        
    <input type="file" name="ulfile1" id="ulfile1"  onChange="beginUploadNew();"/>

beginUploadNew() is executed on submit(which is shortcutted to onChange [instead of clicking submit]):

function beginUploadNew(){
$('#uploadform').submit();  
$("#uploadprogressbar").fadeIn();
progress_key= $("#progress_key").val();
alert (progress_key);
var i = setInterval(function() 
{ 
    $.getJSON("uploadprogress.php?id=" + progress_key, function(data) 
    {
        if (data == null) 
        {
            clearInterval(i);
            location.reload(true);
            //alert ("oh noes2");
            return;
        }
        //alert ("oh noes3");
        //alert (parseInt(data.bytes_total));
        var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
        $("#uploadprogressbar").progressBar(percentage);
    });

}, 1000);
return true;}

The PROBLEM: Sometimes(usually the first time that i press that submit button) it seems that everything is going ok, the loading bar fades in, just as the script is written, then abruptly reloads the page as it nothing has happened. I'm uploading 1.5 meg pictures for testing, and there is certainly not enough time to have passed for it to have uploaded.

And Sometimes it uploads just fine.

Any suggestion? I am definitely waiting long enogh for both the main page and the iframe to load, so that shouldn't be that issue.

Thanks, Jason

Answer 1

data == null looks risky. if You return something ill-formed in the php it will return true and end displaying preloader. Try:

1. watching what is being returned before upload starts and when it's at 0%
2. returning explicitly some ending or watching for 100% etc. so that You don't stop displaying progress bar when php returns non-JSON text