Blazor UI hanging during memory file upload

Question

I'm working on a simple blazor application that receives a file upload and stores it. I am using BlazorInputFile and I can't work out why copying the stream to MemoryStream is causing the browser to freeze.

The details of how to use (and how it's implemented) BlazorInputFile are explained in this blog post: Uploading Files in Blazor.

 var ms = new MemoryStream();
 await file.Data.CopyToAsync(ms); // With a 1MB file, this line took 3 seconds, and froze the browser

 status = $"Finished loading {file.Size} bytes from {file.Name}";

Sample project/repo: https://github.com/paulallington/BlazorInputFileIssue (this is just the default Blazor app, with BlazorInputFile implemented as per the article)

How odd, I can consistently reproduce now. I tracked it down, it looks like it might actually a bug in blazor, I've just seen an issue on github. The StateHasChanged is a hangover from the bigger app I think, sorry copy and paste issue :) — Paul, May 07 '20 at 08:49
Did you ever manage to figure this out? I'm attempting to load an ~`5MB` file and everything just freezes indefinitely... — WBuck, Sep 01 '20 at 14:09
@WBuck I sort of gave up in the end, and tried the RadZen file uploader - it works really well, and has nice progress indicators on it as well — Paul, Sep 01 '20 at 20:53

score 2 · Answer 1 · edited Dec 02 '20 at 11:48

2

Use await Task.Delay(1); as mentioned on Zhi Lv's comment in this post blazor-webassembly upload file can't show progress?

var buffer = new byte[imageFile.Size];
await Task.Delay(1);

await imageFile.OpenReadStream(Int64.MaxValue).ReadAsync(buffer);

pratica.Files.Add(new FilePraticaRequest()
{
    Contenuto = buffer,
    Nome = imageFile.Name,

});
StateHasChanged();

edited Dec 02 '20 at 11:48

Quercus

2,015
1
12
18

answered Dec 02 '20 at 10:16

Davide Camerlingo

21
4

LordSilvermort · Answer 2 · 2020-05-08T10:58:50.007

I've experienced the same issue. I've tried both predefined components such as Steve Sanderssons file upload and MatBlazor fileupload and also my own component to handle fileuploads. Small files are not a problem. Once the files are a bit larger in size the UI will hang itself. MemoryOutOfBoundsException (or similar). So no, async/await can't help you release the UI. I have put so much effort into this issue, one solution, that I am currently using, is to do all fileuploads with javascript instead of blazor. Just use javascript to get the file and post it up to the server. No JSInterop.. However, it seems like it is a memory issue in webassembly mono. Read more here: https://github.com/dotnet/aspnetcore/issues/15777

Note: I haven't tried this on the latest Blazor version. So I'm not sure it's fixed or not.

It's not, I tried it too. It lead me to discover the Radzen file uploader - that works *very* well...like you I've spent WAY too long trying to work it out, hehe — Paul, May 08 '20 at 14:03

score 0 · Answer 3 · answered May 06 '20 at 06:54

0

You wait for the copy result, so the app freeze, you can refactor your code like this;

var ms = new MemoryStream();
file.Data.CopyToAsync(ms).ContinueWith(async task => 
{
   if (task.Exception != null)
   {
      throw task.Exception; // Update this by your convenience
   }
   status = $"Finished loading {file.Size} bytes from {file.Name}";
   await InvokeAsync(StateHasChanged).ConfigureAwait(false); // informs the component the status changed
}; // With a 1MB file, this line took 3 seconds, and should not froze the browser

answered May 06 '20 at 06:54

agua from mars

16,428
4
61
70

Alas that doesn't make a difference. The screen still freezes. I *think* it might actually be a problem with Blazor itself – Paul May 06 '20 at 13:55
Did you try when compiled in Release mode ? It can be a debugger or compilation options issue. – agua from mars May 06 '20 at 14:31
It looks like it's actually a bug in blazor, I've just seen an issue on github. thank you though – Paul May 07 '20 at 08:48

Blazor UI hanging during memory file upload

3 Answers3