Nginx Upload Progress module - differing XMLHttpRequest behavior on local instance and webserver

Question

Hi I'm basically doing an uploader and using the nginx upload progress module. What I don't understand is why it is running fine on my local machine on localhost (giving XMLHttpRequest readyState 4, with the javascript progress bar % increases accordingly) but can't seem to get any server response when I deploy it on a server (though it clearly does connect to /progress, keeps giving XMLHttpRequest readyState 1)

just following the usual nginx upload progress module code:

function fetch(uuid) {
    req = new XMLHttpRequest();
    req.open("GET", "/progress", true);
    req.setRequestHeader("X-Progress-ID", uuid);
    req.onreadystatechange = function () {

        /* checking the state here ..*/
        console.log(req.readyState);
        console.log(req.status);

        if (req.readyState == 4) {
            if (req.status == 200) {

             /* poor-man JSON parser */
             var data = eval(req.responseText);
             console.log(data.state);

             if (data.state == 'done' || data.state == 'uploading') {
                prog = Math.floor(100 * (data.received / data.size));
                $("#progressbar").progressbar({value: prog});
                $("#percentage").html(prog+"%");
             }
             if (data.state == 'done' || data.received >= data.size) {
                window.clearTimeout(timeout);
             }
          }
       }
    }
    req.send(null);
};  

and here are the console logs: OK for local nginx instance

[22:12:25.734] POST http://localhost:8080/?X-Progress-ID=5b8702050a784e6604953201e398c99a [HTTP/1.1 200 OK 1335ms]
[22:12:25.677] "initialized"
[22:12:25.838] GET http://localhost:8080/progress [HTTP/1.1 200 OK 0ms]
[22:12:25.783] 2
[22:12:25.783] 200
[22:12:25.784] 3
[22:12:25.784] 200
[22:12:25.784] 4
[22:12:25.784] 200
[22:12:25.784] "uploading"

not OK for test server

[00:16:20.638] POST http://00.mydomain.com/?X-Progress-ID=c65681d605911db0b8da3fb0e436d851 [HTTP/1.1 200 OK 2925ms]
[00:16:20.582] "initialized"
[00:16:20.738] GET http://00.mydomain.com/progress [HTTP/1.1 200 OK 293ms]
[00:16:21.039] GET http://00.mydomain.com/progress [HTTP/1.1 200 OK 304ms]
[00:16:20.979] 1
[00:16:20.979] 0
[00:16:20.979] 1
[00:16:20.979] 0
[00:16:20.979] 1
[00:16:20.980] 0
[00:16:21.341] GET http://00.mydomain.com/progress [HTTP/1.1 200 OK 304ms]
[00:16:21.286] 1
[00:16:21.286] 0
[00:16:21.287] 1
[00:16:21.287] 0
[00:16:21.287] 1
[00:16:21.287] 0
...keeps repeating till upload complete...

Any clues to where my error might be?

Answer 1

Turns out to be an async/sync issue for the GET request to /progress... still investigating the issue so I can use async, but basically when I change

req.open("GET", "/progress", true);

to

req.open("GET", "/progress", false);

it starts working on my server

**UPDATE**: turns out to be a silly typo/cutpaste error, it should be

var req = new XMLHttpRequest();

so somehow the js error behaves differently on local and server instance and is ignored sometimes... now the async upload process (with progress bar and resumable) works yay!

**SIDE NOTE**: the given example on the main Nginx wiki for json parsing

var data = eval(req.responseText);

is really not safe, but I've noticed the nginx upload progress module returns back a wrongly-formatted JSON like

({ "state" : "uploading", "received" : 8671, "size" : 2218274 });

so doing something like this would be better

/* non-poor-man JSON Parser */
         var response = req.responseText;
         var jsonlen = response.length;
         var jsondata = response.slice(1, jsonlen-4); //note returned json is malformed
         var data = JSON.parse(jsondata);