XMLHttpRequest in google-chrome is not reporting progress events XMLHttpRequest in google-chrome is not reporting progress events google-chrome google-chrome

XMLHttpRequest in google-chrome is not reporting progress events


I think I have a solution for your problem
I don't know what is behind this function "generateRandomData()"

var data = generateRandomData(currentPayloadId)

It is working when I change into this:

var data = new FormData();data.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

Small explanation: You need manually to append to form data an file input form, where fileToUpload is <input type="file" name="fileToUpload" id="fileToUpload" />
And in your updateProgress function in IF part you can add something like this to track progress console.log(evt.total +" - "+ evt.loaded)
enter image description here

This is working in Google Chrome browser. I have tested in new browser version 57
I made for myself an upload progress form 4 years ago, which means that this code is working in old browser version too.

A whole code snippet will be looking like this

function test(){    req = new XMLHttpRequest();    req.upload.addEventListener("progress", updateProgress, false);    req.addEventListener("readystatechange", updateProgress, false);    req.addEventListener("error", uploadFailed, false);    req.addEventListener("abort", uploadCanceled, false);    //var data = generateRandomData(currentPayloadId);    var data = new FormData();    data.append("fileToUpload", document.getElementById('fileToUpload').files[0]);    totalSize = data.length;    req.open("POST", "www.mydomain.com/upload.aspx");    start = (new Date()).getTime();    req.send(data);}function updateProgress(evt){    if (evt.lengthComputable) {        total = totalSize = evt.total;        loaded = evt.loaded;        console.log(evt.total +" - "+ evt.loaded)    }    else {        total = loaded = totalSize;    }}


I had this problem when the page your are loading doesn't contain a

  Content-Length: 12345

in the header, where 12345 is the length of the response in bytes. Without a length parameter, the progress function has nothing to work on.


First, make sure that "www.example.com" is added to the manifest.json, like so:

manifest.json

 {   ..   "permissions": [     "http://www.example.com/",     "https://www.example.com/",   ],   .. }

Then I think your example should work.

For more information about using xhr in google chrome extensions the docs are here.

Also the CSP docs are worth taking a look at if what I provided above does not.