asp.net-coreuser-interfacecontroller.net-8.0blazor-webapp
In ASP.NET Core Blazor with a download controller, is there a way to update a progress bar back to the page?
I would like to be able to update a percent progress bar of to show how far along in reading files my controller is.
This is my controller for downloading:
[HttpGet("multiple/{*pathsInSharedDrive}")]
public async Task<IActionResult> DownloadFiles(string pathsInSharedDrive)
{
string[] paths = pathsInSharedDrive.Split(',');
var sharedDrivePath = _configuration.GetSection("PathStrings")["SecureFileShare"];
var tempZipPath = Path.Combine(Path.GetTempPath(), Path.GetRandomFileName() + ".zip");
try
{
using (var zipArchive = ZipFile.Open(tempZipPath, ZipArchiveMode.Create))
{
foreach (var path in paths)
{
if (System.IO.File.Exists(path))
{
var relativePath = path.Substring(path.LastIndexOf('/') + 1);
zipArchive.CreateEntryFromFile(path, relativePath);
}
else if (Directory.Exists(path))
{
var files = Directory.GetFiles(path, "*", SearchOption.AllDirectories);
foreach (var file in files)
{
var relativePath = file.Substring(path.LastIndexOf('/') + 1);
zipArchive.CreateEntryFromFile(file, relativePath);
}
}
}
}
var zipBytes = await System.IO.File.ReadAllBytesAsync(tempZipPath);
return File(zipBytes, "application/zip", "BH-files.zip");
}
finally
{
if (System.IO.File.Exists(tempZipPath))
{
System.IO.File.Delete(tempZipPath);
}
}
}
I have been using navigate to to get to the controller
NavManager.NavigateTo($@"api/download/multiple/{controllerParameter}", forceLoad: true);
Can I send back information form the controller to the page that tells it x file out of y files?
Like in the foreach I simply put an I variable that returns back to my page each iteration to slowly update the progress bar on the page.
I tried something like this with a Javascript:
[HttpGet("multiple/{*pathsInSharedDrive}")]
public async Task DownloadFiles(string pathsInSharedDrive)
{
string[] paths = pathsInSharedDrive.Split(',');
var sharedDrivePath = _configuration.GetSection("PathStrings")["SecureFileShare"];
Response.ContentType = "application/zip";
Response.Headers.Add("Content-Disposition", "attachment; filename=BH-files.zip");
using (var archive = new ZipArchive(Response.BodyWriter.AsStream(), ZipArchiveMode.Create))
{
var progressInfo = new ProgressInfo();
// Calculate total size
foreach (var path in paths)
{
var fullPath = Path.Combine(sharedDrivePath, path);
if (System.IO.File.Exists(fullPath))
{
progressInfo.TotalSize += new FileInfo(fullPath).Length;
}
else if (Directory.Exists(fullPath))
{
progressInfo.TotalSize += Directory.GetFiles(fullPath, "*", SearchOption.AllDirectories).Sum(f => new FileInfo(f).Length);
}
}
Response.Headers.Add("X-Total-Size", progressInfo.TotalSize.ToString());
foreach (var path in paths)
{
var fullPath = Path.Combine(sharedDrivePath, path);
if (System.IO.File.Exists(fullPath))
{
var relativePath = Path.GetFileName(fullPath);
await AddFileToArchive(archive, fullPath, relativePath, progressInfo);
}
else if (Directory.Exists(fullPath))
{
var files = Directory.GetFiles(fullPath, "*", SearchOption.AllDirectories);
foreach (var file in files)
{
var relativePath = file.Substring(fullPath.Length + 1);
await AddFileToArchive(archive, file, relativePath, progressInfo);
}
}
}
}
}
private async Task AddFileToArchive(ZipArchive archive, string filePath, string entryName, ProgressInfo progressInfo)
{
var entry = archive.CreateEntry(entryName);
using (var entryStream = entry.Open())
using (var fileStream = System.IO.File.OpenRead(filePath))
{
await fileStream.CopyToAsync(entryStream);
progressInfo.ProcessedSize += fileStream.Length;
Response.Headers["X-Processed-Size"] = progressInfo.ProcessedSize.ToString();
await Response.Body.FlushAsync();
}
}
js
window.downloadWithProgress = function (url, filename) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onprogress = function (event) {
var totalSize = xhr.getResponseHeader('X-Total-Size');
var processedSize = xhr.getResponseHeader('X-Processed-Size');
if (totalSize && processedSize) {
var percentComplete = (processedSize / totalSize) * 100;
DotNet.invokeMethodAsync('SecureFileShare', 'UpdateProgress', percentComplete);
}
};
xhr.onload = function () {
if (this.status === 200) {
var blob = new Blob([this.response], { type: 'application/zip' });
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
resolve();
} else {
reject(new Error('Download failed'));
}
};
xhr.onerror = function () {
reject(new Error('Network error'));
};
xhr.send();
});
};
On the page, I call the Javascript:
await JSRuntime.InvokeVoidAsync("downloadWithProgress", url, "BH-files.zip");
This worked for downloading but
var processedSize = xhr.getResponseHeader('X-Processed-Size');
was not updating.
There has to be a better way. Let me know what you think.
Solution
You can use real-time communication technology such as SignalR to let the server push information to the client, there by meeting the need for real-time progress updates, and thus updating the progress bar in real time during the file download process. In this process, the SignalR Hub is used to receive and broadcast progress update messages, and the front end connects to the Hub through the SignalR client to receive these messages and update the UI. The following is a single path example for your reference:
Controller:
[ApiController]
[Route("api/[controller]")]
public class HomeController : Controller
{
private readonly IHubContext<MyChatHub> _hubContext;
private readonly IConfiguration _configuration;
public HomeController(IHubContext<MyChatHub> hubContext, IConfiguration configuration)
{
_hubContext = hubContext;
_configuration = configuration;
}
[HttpGet]
public async Task<IActionResult> DownloadFiles(string pathsInSharedDrive)
{
string[] paths = pathsInSharedDrive.Split(',');
var sharedDrivePath = _configuration.GetSection("PathStrings")["SecureFileShare"];
var tempZipPath = Path.Combine(Path.GetTempPath(), Path.GetRandomFileName() + ".zip");
try
{
using (var zipArchive = ZipFile.Open(tempZipPath, ZipArchiveMode.Create))
{
var totalSize = CalculateTotalSize(paths);
foreach (var path in paths)
{
var fullPath = Path.Combine( path);
if (System.IO.File.Exists(fullPath))
{
await AddFileToArchive(zipArchive, fullPath, Path.GetFileName(fullPath), totalSize);
}
else if (Directory.Exists(fullPath))
{
var files = Directory.GetFiles(fullPath, "*", SearchOption.AllDirectories);
foreach (var file in files)
{
await AddFileToArchive(zipArchive, file, file.Substring(fullPath.Length + 1), totalSize);
}
}
}
}
await _hubContext.Clients.All.SendAsync("ReceiveProgress", 100);
var zipBytes = await System.IO.File.ReadAllBytesAsync(tempZipPath);
return File(zipBytes, "application/zip", "BH-files.zip");
}
finally
{
if (System.IO.File.Exists(tempZipPath))
{
System.IO.File.Delete(tempZipPath);
}
}
}
private long CalculateTotalSize(string[] paths)
{
long totalSize = 0;
foreach (var path in paths)
{
var fullPath = Path.Combine(path);
if (System.IO.File.Exists(fullPath))
{
totalSize += new FileInfo(fullPath).Length;
}
else if (Directory.Exists(fullPath))
{
totalSize += Directory.GetFiles(fullPath, "*", SearchOption.AllDirectories).Sum(f => new FileInfo(f).Length);
}
}
return totalSize;
}
private async Task AddFileToArchive(ZipArchive archive, string filePath, string entryName, long totalSize)
{
var entry = archive.CreateEntry(entryName);
using (var entryStream = entry.Open())
using (var fileStream = System.IO.File.OpenRead(filePath))
{
var buffer = new byte[4096];
int bytesRead;
long bytesWritten = 0;
while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
{
await entryStream.WriteAsync(buffer, 0, bytesRead);
bytesWritten += bytesRead;
int percentComplete = (int)((double)bytesWritten / totalSize * 100);
await _hubContext.Clients.All.SendAsync("ReceiveProgress", percentComplete);
}
}
}
}
Js:
window.downloadWithProgress = function (url, filename) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onprogress = function (event) {
var totalSize = xhr.getResponseHeader('X-Total-Size');
var processedSize = xhr.getResponseHeader('X-Processed-Size');
if (totalSize && processedSize) {
var percentComplete = (processedSize / totalSize) * 100;
DotNet.invokeMethodAsync('BlazorApp3', 'UpdateProgress', percentComplete);
}
};
xhr.onload = function () {
if (this.status === 200) {
var blob = new Blob([this.response], { type: 'application/zip' });
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
resolve();
} else {
reject(new Error('Download failed'));
}
};
xhr.onerror = function () {
reject(new Error('Network error'));
};
xhr.send();
});
};
And I simulated the local path:
@page "/download"
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime
@using Microsoft.AspNetCore.SignalR.Client
@rendermode InteractiveServer
<h3>Download Progress</h3>
<div>
<button @onclick="StartDownload">Start Download</button>
</div>
<div>
<progress id="progressBar" max="100" value="@progress"></progress>
<span>@progress %</span>
</div>
@code {
private HubConnection _hubConnection;
private int progress;
protected override async Task OnInitializedAsync()
{
_hubConnection = new HubConnectionBuilder()
.WithUrl(Navigation.ToAbsoluteUri("/MyChatHub"))
.Build();
_hubConnection.On<int>("ReceiveProgress", p =>
{
progress = p;
InvokeAsync(StateHasChanged);
});
await _hubConnection.StartAsync();
}
private async Task StartDownload()
{
try
{
var directoryPath = "C:/Users/v-yuningduan/Pictures/Screenshots";
var encodedPath = System.Net.WebUtility.UrlEncode(directoryPath);
var url = $"api/Home?pathsInSharedDrive={encodedPath}";
await JSRuntime.InvokeVoidAsync("downloadWithProgress", url, "Screenshots.zip");
}
catch (Exception ex)
{
Console.WriteLine($"Error: {ex.Message}");
}
}
public async ValueTask DisposeAsync()
{
if (_hubConnection != null)
{
await _hubConnection.DisposeAsync();
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./JS/Downloadmethod.js");
}
}
}
After completion:
- Asp.Net Core - The configured user limit (128) on the number of inotify instances has been reached
- After Get success, why does first Angular 9 Put request succeed on MVC Core 2.2 API Controller, but fails on next PUT with http err 302 and/or 503?
- Entity Framework search multiple words
- 'Access-Control-Allow-Origin' in ASP.NET Core 6
- How to run dotnet tests in a specific environment?
- How can I make my Blazor Web App save the login infor entered as it would in InteractiveServer but still be able to use the HttpContext for login?
- Exchanging a google idToken for local openId token c#
- Is the ConfigureApplicationCookie(...) designed to allow us to configure an existing cookie by default in the default scheme (Cookies)?
- ASP.NET Azure AD / Entra Authentication - App roles in token, but not being assigned to principal
- How to save Stream data from external GET request in .NET
- How to manage user claims?
- How can I use Dependency Injection in an ASP.NET Core ActionFilterAttribute?
- How to get Role Claims in asp.net core 6 web api?
- Unexpected System.BadImageFormatException: Index not found That is Fixed with Restart
- ASP.NET Core Web API - FluentValidationMvcExtensions.AddFluentValidation(IMvcBuilder, Action<FluentValidationMvcConfiguration>)' is obsolete
- Write and read string from MemoryStream
- I'm getting malformed multipart POST when I try to post data to remote API with C# HttpClient
- How to Implement Polymorphic Request Bodies in ASP.NET Core Web API with Swagger UI?
- How to set up Automapper in ASP.NET Core
- What means skipNegotiation in SignalR HubConnection?
- BasePageModel in Razor Pages
- How to auto increment the version (eg. “1.0.*”) of a .NET Core project?
- Secrets inject securely Dockerfile during build .NET
- EF Core 8 does not merge entities
- How to use appsettings.json in Asp.net core 6 Program.cs file
- How to determine if asp.net core has been installed on a windows server
- .NET 8 Blazor Server - role authorization with Windows Authentication
- Should EFCore migrations be committed to version control?
- EF Core one-to-one relation returns one-to-many relation
- How to deal with Id property in DTO in ASP.NET Web API