File Upload With Progress Using Blazor WebAssembly And ASP.NET Core API

using Microsoft.AspNetCore.Components;  
using Microsoft.AspNetCore.Components.Forms;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
  
namespace UploadFileWithProgress.Client.Pages  
{  
    public partial class Index
    {  
  
        public void OnChooseFile(InputFileChangeEventArgs e)  
        {  
  
        }  
  
    }  
}  

So the upcoming part is to implement the OnChooseFile function that will let the user choose a file and prepare to click upload, the following code is self-explanatory,

// MAke sure to import the namespace
using System.IO; 

// Create a global variable that will be used by OnChooseFile and UploadAsync methods   
       private Stream _fileStream = null;  
       private string _selectedFileName = null;   
  
       public void OnChooseFile(InputFileChangeEventArgs e)  
       {  
           // Get the selected file   
           var file = e.File;  
  
           // Check if the file is null then return from the method   
           if (file == null)  
               return;  
  
           // Validate the extension if requried (Client-Side)  
  
           // Set the value of the stream by calling OpenReadStream and pass the maximum number of bytes allowed because by default it only allows 512KB  
           // I used the value 5000000 which is about 50MB  
           using (var stream = file.OpenReadStream(50000000))  
           {  
               _fileStream = stream;  
               _selectedFileName = file.Name;   
           }  
       }  

Uploading a file to an API happens through submitting a POST/PUT request to the API with a body of Mutlipart-Form data which means the body is a form with a set of key-values and those key-values could be as much as you want and they could also be in two types (StringContent like ("Id", "123")) or (StreamContent ("file", stream of the file)) and after submitting the StreamContent of the file to the API the requests goes as chunks of bytes the default StreamContent class in .NET doesn't support the measurement of the number of bytes that have been submitted to the server so what we have to do is to create our own custom StreamContent class that holds an event called OnProgress so we can subscribe for that event and it gives as arguments the total amount of bytes to complete and the value of upload bytes after each uploaded chunk that we can specify its value, so let's move to the next step and create our own StreamContent class and call it ProgressiveStreamContent as follows (Code is self-explaintory).

You can create a file in the project and call it ProgressiveStreamContent.cs,

public class ProgressiveStreamContent : StreamContent
    {
        // Define the variables which is the stream that represents the file
        private readonly Stream _fileStream;
        // Maximum amount of bytes to send per packet
        private readonly int _maxBuffer = 1024 * 4; 

        public ProgressiveStreamContent(Stream stream, int maxBuffer, Action<long, double> onProgress) : base(stream)
        {
            _fileStream = stream;
            _maxBuffer = maxBuffer;
            OnProgress += onProgress;
        }

        /// <summary>
        /// Event that we can subscribe to which will be triggered everytime after part of the file gets uploaded.
        /// It passes the total amount of uploaded bytes and the percentage as well
        /// </summary>
        public event Action<long, double> OnProgress;

        // Override the SerialzeToStreamAsync method which provides us with the stream that we can write our chunks into it
        protected async override Task SerializeToStreamAsync(Stream stream, TransportContext context)
        {
            // Define an array of bytes with the the length of the maximum amount of bytes to be pushed per time
            var buffer = new byte[_maxBuffer];
            var totalLength = _fileStream.Length;
            // Variable that holds the amount of uploaded bytes
            long uploaded = 0;

            // Create an while loop that we will break it internally when all bytes uploaded to the server
            while (true)
            {
                using (_fileStream)
                {
                    // In this part of code here in every loop we read a chunk of bytes and write them to the stream of the HttpContent 
                    var length = await _fileStream.ReadAsync(buffer, 0, _maxBuffer);
                    // Check if the amount of bytes read recently, if there is no bytes read break the loop
                    if (length <= 0)
                    {
                        break;
                    }

                    // Add the amount of read bytes to uploaded variable
                    uploaded += length;
                    // Calculate the percntage of the uploaded bytes out of the total remaining 
                    var perentage = Convert.ToDouble(uploaded * 100 / _fileStream.Length);

                    // Write the bytes to the HttpContent stream
                    await stream.WriteAsync(buffer);

                    // Fire the event of OnProgress to notify the client about progress so far
                    OnProgress?.Invoke(uploaded, percentage);

                    // Add this delay over here just to simulate to notice the progress, because locally it's going to be so fast that you can barely notice it
                    await Task.Delay(250);
                }
            }
        }

    }

Actually, this is all you need to do, the last step is just to submit or file to the server and use our new class and show the progress in the UI so let's go ahead and do that.

Now back to the Index.razor.cs the code-behind file.

Let's create two local fields to be used in the UI to show the percentage and the number of uploaded bytes and then write the method that will upload the file to the server (Code is self-explanatory).

 private long _uploaded = 0;
        private double _percentage = 0;
        // The method that will submit the file to the server
        public async Task SubmitFileAsync()
        {
            // Create a mutlipart form data content which will hold the key value of the file that must be of type StreamContent
            var content = new MultipartFormDataContent();

            // Create an instance of ProgressiveStreamContent that we just created and we will pass the stream of the file for it
            // and the 40096 which are 40KB per packet and the third argument which as a callback for the OnProgress event (u, p) are u = Uploaded bytes and P is the percentage
            var streamContent = new ProgressiveStreamContent(_fileStream, 40096, (u, p) =>
            {
                // Set the values of the _uploaded & _percentage fields to the value provided from the event
                _uploaded = u;
                _percentage = p;

                // Call StateHasChanged() to notify the component about this change to re-render the UI
                StateHasChanged();
            });

            // Add the streamContent with the name to the FormContent variable
            content.Add(streamContent, "File");

            // Submit the request 
            var response = await Client.PostAsync("/weatherforecast", streamContent);
        }

Now in the index.razor make the changes to call the Upload method and set the values of the percentage & uploaded/total KB as following,

<div class="row">  
    <div class="col-4">  
        <div class="form-group">  
            <label>File</label>  
            <InputFile OnChange="OnChooseFile" />  
            @* Show the value of the _uploaded variable divided to 1024 to show the amount in KB and also we use _fileStream?.Length / 1024 to show the total amount of KBs  *@
            <p>@(_uploaded / 1024)KB / @(_fileStream?.Length / 1024)KB</p>  
            @* Show the percentage of uploaded amount of of the total *@
            <p>Percentage: @_percentage %</p>
        </div>  
        @* Call the SubmitFileAsync in the @onclick event *@
        <button type="submit" class="btn btn-success btn-block m-1" @onclick="SubmitFileAsync">Upload</button>   
    </div>  
</div>  

Now we are ready to go' let's run the project and choose a file like about 40MB and see the progress in real-time, you should see something like this:

I hope you enjoyed this tutorial and you are able to apply the concept in your application in your style and way

The code is available on GitHub at this link.