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)
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.