xhr.upload.onprogress not working in FireFox

Question

I'm presenting a dialog box for the user to manage photos they will upload using the FileReader. When they upload I show a progress bar.

The xhr.upload.onprogress works in every browser but FireFox.

What should I do to get the xhr.upload.onprogress to fire?

Right now when using FireFox the xhr.upload.onprogress will not even fire.

What changes do I need to make to the code for this to work in FireFox like it does in IE, Chrome, Safari etc?

 uploadFile = function () {

        var xhr = new XMLHttpRequest();

        //Update progress bar
        xhr.upload.onprogress = function (e) {

            var done = e.position || e.loaded, total = e.totalSize || e.total,
                present = Math.floor(done / total * 100);
            progressBar.style.width = present + "%";
            lblProgressPercentage.innerHTML = present + "%";
        };

        //File uploaded
        xhr.onload = function (x) {
            //progressBarContainer.className += " uploaded";
            //progressBar.innerHTML = "Uploaded!";
            setTimeout(function () {
                progressBar.style.width = '5%';
                lblProgressPercentage.innerHTML = '0%';
            }, 3000);
            if (onloadCallback) { if (onloadCallback) { onloadCallback(x.target) }; };
        };

        xhr.open("POST", "/api/files", true);
        xhr.setRequestHeader("Content-Type", "multipart/form-data", true);
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);
        xhr.setRequestHeader("X-File-IsLogo", isLogo || false);
        xhr.setRequestHeader("X-File-Remove", removeFile || '');
        xhr.setRequestHeader("X-File-DESTINATION", destination);
        xhr.send(file);
    };