Home/ Questions/Q 7903267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T09:42:25+00:00

Pretty straight-forward HTML/JS that: Takes a Base64-encoded PNG Converts it to a blob Sets

  • 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0