The Fetch API might seem new to some, but it’s already five years old with browsers rolling out support in 2015. It was a replacement for the dated XMLHttpRequest which was tedious to work with and a relic of the yesteryear of internet.
Still, all of these years one feature that is available in XMLHttpRequest is the ability to handle file upload progress, missing from the Fetch specification and we are now in the year 2020, almost 2021 and still, there is no across the board way to handle file upload progress. This is the last missing piece before Fetch can truly replace XMLHttpRequest.
Coincidentally, shipping in Chrome 85 is support for Fetch upload streaming as an experiment. With Fetch upload streaming, you’ll be able to make a Fetch request with a ReadableStream body. You might have read Jake Archibald’s post on streaming in Javascript back in 2016, it’s a great read if you’re not familiar with streams. Jake actually works on the web standards team over at Google.
Understandably, some developers are still learning standards features that were part of ES2015 and subsequent releases, this is another lump of hardwood on the fire (so-to-speak).
Explaining all of this, it sounds rather complicated and convoluted. Admittedly, streams are another notch in the complexity belt for Javascript developers. And look, I am not going to sugarcoat this, there is a lot to learn here if you plan on creating your own streams.
The Google team have created a demo showcasing how you can stream chunks of text to a server here, showing you how Fetch upload streaming works, admittedly, this is one of the more simple examples. You need to have it enabled and using a compatible version of Chrome for it to work.
You can also reference the w3c-test site to see when Fetch supports ReadableStream objects and the different types of data being passed into them along with the request here.
Like all complicated things on the web, frameworks and libraries will come to the party and make this easier to do. But, while this is all new and still very experimental, you’re going to have to roll up your sleeves and work with streams. Given how powerful they are, I recommend learning them.
By default, Fetch upload streams will be HTTP/2 only and the Fetch request will be rejected if it’s not being done over a HTTP/2 connection. To support Fetch upload streams over HTTP/1 you have to explicitly enable this behaviour. However, be aware that allowHTTP1ForStreamingUpload is a Chrome only feature and not part of the standard.
fetch(url, {
method: 'POST',
body: stream,
allowHTTP1ForStreamingUpload: true
});Sadly, it seems we are still a long way off all major browsers implementing support for Fetch upload streams, but the fact we are finally starting to see some traction in this area in itself is exciting. This has been a long time coming.
Hi Dwayne, thanks for an article. It is a year since you’ve written your post and things don’t seem to move much. I was looking for a way to track upload progress on fetch and this is one out of very few posts that relate to it. Hope things will move forward on some faster pace, but it doesn’t look very promising at the moment. Thanks for giving some light into this and sharing the useful links.