File Uploading with a Progress Bar in ASP.NET Core

This is clear and simple example that demonstrates how to upload files in ASP.NET Core with a progress bar without using any third-party client-side technology (like Flash):

This task is quite simple. In general, we just need to count the bytes number read from a request input stream, compare it with the total request stream length and then get this value from the client-side using an AJAX request.

We will use option 5 from my previous “File Uploading with ASP.NET Core: What Options Do We Have?” post as a base to save our time.

On the client-side we need to change the uploadFiles function a bit in order to have the progress bar:

As you can see, the function itself is almost the same, we only have added startUpdatingProgressIndicator and stopUpdatingProgressIndicator functions calls. The startUpdatingProgressIndicator function starts the timer which updates the progress bar by making AJAX requests to the server every 10 milliseconds to get current progress value.

The server-side part is almost the same too, but here we have added simple logic to calculate current progress and one more action to get that calculated project from the client-side:

I have created the demo project for this post. Feel free to ask if you have any questions!