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
– Paul, Commented May 7, 2020 at 8:49
Did you ever manage to figure this out? I'm attempting to load an ~5MB file and everything just freezes indefinitely... — WBuck
– WBuck, Commented Sep 1, 2020 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
– Paul, Commented Sep 1, 2020 at 20:53

Quercus · Accepted Answer · 2020-12-02 11:48:37Z

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 2, 2020 at 11:48

Quercus

2,0651 gold badge12 silver badges18 bronze badges

answered Dec 2, 2020 at 10:16

Davide Camerlingo

215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LordSilvermort · Accepted Answer · 2020-05-08 10:58:50Z

1

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.

edited May 8, 2020 at 10:58

answered May 8, 2020 at 10:53

LordSilvermort

2772 silver badges11 bronze badges

1 Comment

Paul Over a year ago

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

agua from mars · Accepted Answer · 2020-05-06 06:54:24Z

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 6, 2020 at 6:54

agua from mars

17.5k5 gold badges71 silver badges76 bronze badges

4 Comments

Paul Over a year ago

Alas that doesn't make a difference. The screen still freezes. I think it might actually be a problem with Blazor itself

agua from mars Over a year ago

Did you try when compiled in Release mode ? It can be a debugger or compilation options issue.

Paul Over a year ago

It looks like it's actually a bug in blazor, I've just seen an issue on github. thank you though

kittyhawk Mar 18 at 19:31

@Paul can you link the github issue?

Collectives™ on Stack Overflow

Blazor UI hanging during memory file upload

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related