php - upload progress with post processing

Question

I have an upload form where users can upload files. After the upload is done the files are post processed and sometimes the processing takes up to 10-15 seconds after the upload has completed..

After the upload is done the progress bar is at 100%, but how is it possible to detect when the file has completed, so you could show the user a "please wait" sign while the file is processing.. The user might think that the browser has frozen og crashed since the progress bar is at 100% but nothing is happening..

A client-side solution in pure HTML5+javascript is preferred, but not a must :)

Answer 1

Try

html

<progress min="0" max="10000"></progress>
<output for="progress"></output>
<output for="progress"></output>
<br />
<table id="results"></table>

js

var len = arr.length // file length
    , start = 0 // update progress
    , outputs = $("output[for=progress]") // notifications
    , progress = $("progress")
    , results = $("#results") // post processing 
    // gif spinner
    , spinner = $("<img />", {
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
// upload file
var request = function () {
    progress.prop("max", len);
    s = setInterval(function () {
        progress.prop("value", ++start);
        outputs.eq(0)
            .text("uploading file...")
    }, 1)
    return $.post("/echo/json/", {
        json: JSON.stringify(arr)
    })
    .then(function (data) {
        clearInterval(s)
        s = null;
        progress.prop("value", len);
        outputs.eq(0)
            .html("upload complete ! <br />processing response, please wait...")
        .next(outputs.eq(1))
        .html(spinner);
        return data
    })
};

request()
.then(function (data) {
    // do post upload processing stuff
    var process = function() {
    var dfd = new $.Deferred();
    // processing...
    t = setTimeout(function () {
        data.forEach(function (res) {
            results.append(
            $("<tr />", {
                "html": $("<td />", {
                    "html": res.value
                })
            }))
        });
        if (results.find("tr").length === len) {
           dfd.resolve("complete !")
        }
    }, 1 + Math.floor(Math.random() * 15000));
        return dfd.promise()
    };
    // do stuff when all post processing complete
    process().then(function(complete) {
       outputs.eq(0).empty()
       .next(outputs.eq(1))
       .html(complete);
       clearTimeout(t);
       t = null;
    })
});

jsfiddle http://jsfiddle.net/guest271314/d2szrs20/