使用 Blazor 和 As.net Webapi 跟踪 HttpClient.PostAsync 进度

Question

I am currently using Blazor and Asp.Net WebApi Controller to perform some file upload/download..And I have a UploadFiles() called in the Blazor client that looks like this:

public async Task<bool> UploadFiles(Action<int> callback, IReadOnlyList<IBrowserFile> files, string subdir = "")
{
    if (files != null)
    {
        var content = new MultipartFormDataContent();
        foreach (var file in files)
        {
            var fileContent = new StreamContent(file.OpenReadStream(_allowedMaxFileSize));
            content.Add(fileContent, "\"files\"", file.Name);  
            hasItemsForUpload = true;
        }

        if (content != null)
        {
            var uri = $@"api/mycontroller/upload?subdir=" + subdir;
            var result = await _http.PostAsync(uri, content);

            if (result.IsSuccessStatusCode)
            {                       
                return true;
            }
        }
    }    

    return false;
}

Is there a way for me to easily track httpclient.postasync() % progress where I can pass the % as int in my callback? Note that _http here is injected through dependency injection registered as AddScope() of the startup.cs

I've seen complicated examples using custom http content but I can't seem to wrap my head around it... :(

Please help..

Answer 1

FileComponent.razor

<div> Progress: @current </div>

@code
{
  int current = 0;
  
  void UpdateProgress()
  {
    current++;
    StateHasChanged();
  }
  void ResetBatch(){ current=0; }

  
  public async Task<bool> UploadFiles(Action<int> callback, IReadOnlyList<IBrowserFile> files, string subdir = "")
{
    ResetBatch();
    if (files != null)
    {
        var content = new MultipartFormDataContent();
        foreach (var file in files)
        {
            var fileContent = new StreamContent(file.OpenReadStream(_allowedMaxFileSize));
            content.Add(fileContent, "\"files\"", file.Name);  
            hasItemsForUpload = true;
        if (content != null)
        {
            var uri = $@"api/mycontroller/upload?subdir=" + subdir;
            var result = await _http.PostAsync(uri, content);
        
         }

         UpdateProgress();
        }
    }    
    ResetBatch();
    return true;
}
}

Note that instead of 'current' you can create a whole upload batch class that contains information regarding total files to be updated, filenames, current file name, status of each upload etc etc.