CODEWITHSUNDEEP
ajaxfirefoxuploadprogress
0reo
0reo

Reputation: 103

Progress event in Firefox with AJAX does not reach 100%

I'm writing an upload script which will take a file, process it, the return it to the user. Processing can take several minutes. What I'm currently doing to give the user feedback is displaying an upload bar during the actual upload, and when the upload is finished replace it with a "processing" message. Once the file is finished processing, the message is replace with a link to the new file. This works fine in chrome, but in Firefox, I can only get the progress bar to 99.9%. Is there some way to check if the upload is complete before closing the connection?

Here is what I currently have

    outter = $(".item_box")[0];//content wrapper
    inner = outter.children[0];//content viewer, will be replaced with messages and content

    var p = document.createElement("progress");
    p.className = "uploadprogress";
    p.value = "0";
    p.max = "100";
    inner.textContent = "";
    inner.appendChild(p);//replace initial "click here" message with progress bar

    var formData new FormData();
    for (var i = 0; i < files.length; i++)//files is defined elsewhere and contains form data
    {
        formData.append('userfile', files[i]);
    }

    // now post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', base_url+'upload/upload_media');//url of php script
    xhr.responseType = "json";
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4)//ajax request complete
        {
            p.value = p.innerHTML = 100;//set progress bar to 100%
            var data = JSON.parse(xhr.responseText);//my returned json object
            outter.removeChild(inner);
            var v = document.createElement("video");
            v.controls = "controls";
            v.innerHtml = data.msg;
            outter.appendChild(v);
        }
    }
    xhr.upload.onprogress = function (e)//handles progress bar value
    {
        if (e.lengthComputable)
        {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            p.value = p.innerHTML = (Math.floor(done/total*1000)/10);
            if (done == 100)//this never happens in firefox
            {
                inner.removeChild(p);
                inner.textContent = "processing... please wait";
            }
        }
    }
    xhr.send(formData);

Upvotes: 2

Views: 830

Answers (2)

JoshR
JoshR

Reputation: 471

Ugh... Firefox still hasn't fixed this bug. I'm struggling with the same issue in FF version 28. Like the OP, I cannot move the code from the "onprogress" handler to the "onload" handler, because "onload" doesn't fire until the script has finished processing the uploaded file - which can be much later than when the file has finished uploading. The smaller the uploaded file, the sooner FF stops reporting progress (ex: 280K files might stop reporting at 84%, while 5 MB files might make it all the way to 99% - but never 100%). Since the OP is dealing with consistently large files, he could just set his condition to "(done == 99)" or some similar threshhold. Unfortunately, that won't work for me or anyone else dealing with a wide range of filesizes. Come on, Firefox!

Upvotes: 1

Imran Latif
Imran Latif

Reputation: 1023

This is weird issue in Firefox which I came across too. I resolved this by moving code that I want to execute on 100% progress from onprogress event to xhr.readyState. I removed it from onprogress event because my code was creating problems if I place it in two places.

Upvotes: 1

Related Questions