question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there any way I can attach a progress listener to the xhr.upload object used in fetch?

xhr.upload.addEventListener('progress', function(){ ... })

since I use fetch to upload files, I would find this very useful.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:23
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

102reactions
caubcommented, Oct 28, 2016

I guess you could just go with

function futch(url, opts={}, onProgress) {
    return new Promise( (res, rej)=>{
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'get', url);
        for (var k in opts.headers||{})
            xhr.setRequestHeader(k, opts.headers[k]);
        xhr.onload = e => res(e.target.responseText);
        xhr.onerror = rej;
        if (xhr.upload && onProgress)
            xhr.upload.onprogress = onProgress; // event.loaded / event.total * 100 ; //event.lengthComputable
        xhr.send(opts.body);
    });
}

futch('/').then(console.log)

for now

11reactions
dgrahamcommented, Feb 19, 2015

The XHR instance is an implementation detail of the polyfill that is not exposed to callers.

The best way to upload files, with progress events, is still using XHR directly rather than fetch. You might open an issue on the Fetch API repository to request this feature, though!

Read more comments on GitHub >

github_iconTop Results From Across the Web

File Upload Progress bar - CodePen
HTML5 File Upload Progress Bar Tutorial ...
Read more >
Session Upload Progress - Manual - PHP
The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the...
Read more >
Uploading files with progress monitoring in VanillaJS, Angular ...
So, in this post we will see how to upload files asynchronously with JavaScript with progress monitoring. Step 1: Our backend. Yes, we...
Read more >
NGINX Upload Progress Module
The NGINX Upload Progress module is an implementation of an upload progress system, that monitors RFC1867 POST uploads as they are transmitted to...
Read more >
How to Create Graphical File Upload Progress Bars in HTML5 ...
Implementing the Progress Bar in JavaScript · enables file dragging and dropping onto a web page element · analyzes and displays dropped files...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found