How to get progress from Fetch API?

Question

I'm using $.ajax,i can do that:

var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with upload progress
    console.log(percentComplete);
  }
}, false);

But,when i use fetch api,what should i do?

var fData = new FormData();
fData.append("userfile",document.getElementById("file").files[0]);
fetch("/", {method:"POST",body:fData}).then(function(res){});

score 6 · Accepted Answer · answered Jun 14 '16 at 08:29

6

As of right now, you can't. It's not part of the spec yet. There was an issue for it on the spec's repo but it's closed. There's also some discussion on this issue about it.

Long story short, you are probably better off just sticking with xhr for now unless you want to try some of the polyfills/workarounds in the second issue Iinked.

It's just not supported, and that is also the reason fetch requests don't show up in the network tab in the devtools untill they've completed.

answered Jun 14 '16 at 08:29

ivarni

17,658
17
76
92

Thank you for your answer ^-^! – huiting Chen Jun 14 '16 at 09:50
3

The last statement is not true anymore. – maracuja-juice Mar 31 '19 at 07:44
1

@maracuja-juice I'll happily approve an edit to this answer if you want to update it with the current situation. – ivarni Apr 01 '19 at 06:27

How to get progress from Fetch API?

1 Answers1