In my recent project, I was asked to create a modern and user-friendly multiple-file uploader to upload files from the client-side React application to the server-side .NET Core. A key requirement was providing users with real-time feedback on their upload progress.
While researching approaches to achieve this, I came across the conventional method of using XMLHttpRequest for tracking upload percentages. However, my curiosity led me to explore a newer approach getting more and more popular in the web development community: the ReadableStream Web API, particularly when paired with the fetch API and a ReadableStream object as the request body.
This modern approach caught my attention, especially since it's now supported by all major web browsers. However, finding comprehensive documentation and examples on tracking the upload progress of a ReadableStream object proved to be a challenge.
My journey began with an in-depth study of the official documentation for the Stream API, and after multiple iterations of trial and error, I managed to craft a solution that I'm satisfied with. I believe this approach has the potential to simplify and enhance file upload experiences.
The real eye-opener was this StackOverflow answer. I then understood that the solution did not involve using a ReadableStream but, rather, a TransformStream as an upload tracker.
Thanks to this resource, I was finally able to develop my UI with a graphical representation of the upload progress, using the Mui Linear Progress component and adding some custom styling to a Mui List.
Here's a link to a small CodePen example showcasing the file upload progress in a simple TypeScript snippet.
