0

Pretty straight-forward HTML/JS that:

  • Takes a Base64-encoded PNG
  • Converts it to a blob
  • Sets an img.src to verify that it's a valid PNG
  • Uploads it via XHR after setting event handlers

In Firefox 12 I get the "loadstart" and "loadend" events but no "progress" events.

In Chrome 20 everything works fine.

This file is named "image.html" so it just uploads to itself for testing.

I also tried setting a content-legnth header but that didn't change the results in Firefox so I commented it out.

Can anyone please verify the same results? Am I missing something?

Thanks

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>

var testPng64 = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42rVTgQkAIAjz+P4uggKjTU0pEGLopkxFWu9SepMgS3LUMRImAHEN7r+OUNeowMKfW3bVEUloBCuJdWQDztz/CZClYYKIInTC89m0EW0ei9JBXbnZa1x1A1Sh2i/qfsVWAAAAAElFTkSuQmCC';

function receiveImage(pngBase64) {
    console.log("receiveImage");

    var img = document.getElementById("webImg1");

    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
    var bb = new BlobBuilder();

    var byteString = window.atob(pngBase64);
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
        ia[i] = byteString.charCodeAt(i); 
    }

    bb.append(ab);

    var blob = bb.getBlob("image/png");

    var URL = window.URL || window.webkitURL;
    var imgUrl = URL.createObjectURL(blob);
    img.src = imgUrl;

    upload(blob);
}

function upload(blob) {
    console.log("upload");

    var xhr = new XMLHttpRequest();

    xhr.addEventListener("load", function(e) {
        console.log("xhr load");
    });

    xhr.upload.addEventListener("loadstart", function(e) {
       console.log("xhr upload loadstart");
       console.log(e); 
    }, false);

    xhr.upload.addEventListener("progress", function(e) {
       console.log("xhr upload progress");
       console.log(e); 
    }, false);

    xhr.upload.addEventListener("loadend", function(e) {
       console.log("xhr upload loadend");
       console.log(e); 
    }, false);

    xhr.open("POST", "image.html", true);
    //xhr.setRequestHeader("Content-Length", blob.size);

    xhr.send(blob);
}
</script>
</head>
<body>
    <div>
        <img id="webImg1" src="about:blank" width="64" height="auto"/>
        <progress id="progress1" min="0" max="100" value="0" style="width: 64px;">0%</progress>
    </div>
    <div><button onclick="receiveImage(testPng64)">Load</button></div>
</body>
</html>
Rob Olmos
  • 2,372
  • 15
  • 24

2 Answers2

1

The networking library Firefox uses does not expose upload progress to consumers (like Firefox, say), so there is no way for Firefox to fire upload progress events at the moment.

Edit: Looks like I was wrong; I was remembering code as it existed a while ago, apparently. So then I tried the testcase above... in Firefox 12 it behaves as described, but in a current nightly it fires an upload progress event.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • 1
    Source was my memory of the code, which seems to have been faulty. See "edit" in my answer above. – Boris Zbarsky May 09 '12 at 03:46
  • Thanks so much for testing that! I tried looking for a bug report or a commit message in the HG logs but nothing. Oh well. – Rob Olmos May 09 '12 at 18:17
  • Hmm. It seems weirdly inconsistent. Sometimes I see a progress event, sometimes not. Let me dig into this a bit. – Boris Zbarsky May 09 '12 at 18:54
  • 1
    Ah, I see what's happening here. There will be a progress event if there is actual progress _after_ loadstart has already fired. If things are sent fast enough, there may not be. The spec on progress events seems to say this is the right behavior. – Boris Zbarsky May 09 '12 at 19:29
1

Yes, I have the same problem and I rewrite the load event to change the progress bar when the upload file size is less than 100Kb. You can see it here.

tkanzakic
  • 5,499
  • 16
  • 34
  • 41
godsee
  • 11
  • 1