1

The file uploads work perfectly, I can't get the progess and load events to callback

I have the following in a JavaScript file as my WebWorker code:

UploadFileWorker.js

function uploadFile(url, m) {
    var f = m.file;
    var fd = new FormData();
    fd.append('file', f, f.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function (e) {
        m.set('status', (e.loaded / e.total) * 100 );
        postMessage(m); // <-- never makes the call, doesn't throw and error either
    });
    xhr.upload.addEventListener('load', function (e) {
        m.set('status',100);
        postMessage(m); // <-- never makes the call, doesn't throw and error either
    });
    xhr.open('POST', url, true);
    xhr.send(fd);
}

function getUploadURL(m) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', function () {
        var url = this.responseText;
        uploadFile(url,m);
    });
    xhr.open('GET', '/upload', false);
    xhr.send();
}

var q = [];

onmessage = function(e) {
    postMessage(e.data);
    q.push(e.data);
    while (q.length > 0) {
        var m = q.pop();
        getUploadURL(m);
    }
};

The postMessage(e.data); in the onmessage function work perfectly.

The postMessage(m); in the xhr.upload.addEventListeners() callbacks never happen. They worked fine before I tried and move these functions into WebWorker code.

Is this a scope issue? If so, how do I prefix the calls to get them to work.?

For completeness here is how I am defining my instance of Worker and kicking it off.

onButtonClick: function(button, e, eOpts) {
    var ugv = this.getUploadGridView();
    var fs = this.getFileUploadStore();
    var worker = new Worker('/js/UploadFileWorker.js');
    worker.onmessage = function(e) {
        console.log(e);
    };

    var selected = ugv.getSelectionModel().getSelection();

    Ext.each(selected, function(m) {
        var o = {};
        o.name = m.get('name');
        o.size = m.get('size');
        o.status = m.get('status');
        o.file = m.file;
        worker.postMessage(o);
    });
},

Again the actual uploading of the files works great, I can't figure out how to call postMessage(); from inside the xhr callbacks.

  • Where did you define `m` in your Web Worker? Add `worker.onerror = function(message) {console.error(message);};` to see errors. And I believe that the `FormData` object is not defined in Web Workers, unless you use a polyfill (http://stackoverflow.com/a/13970107). – Rob W Nov 23 '13 at 20:07
  • Like I said the uploads work fine, I am using the polyfill. It is the `postMessage()` callback that I can't get to work. I get no errors either, just nothing happens. –  Nov 23 '13 at 20:27

1 Answers1

0

This is apparently a bug that has been fixed just recently.

Issue 71433002: Enable XHR upload progress events for Workers. (Closed)

Workaround until Chrome gets updated

xhr.addEventListener(

instead of

xhr.upload.addEventListener(

This has the drawback that progress only gets called for every 1MB, files smaller than 1MB never get a progress event fired.

Community
  • 1
  • 1