SteveSandersonMS / BlazorInputFile

A file input component for Blazor applications
250 stars 75 forks source link

UI hanging on file upload #32

Open paulallington opened 4 years ago

paulallington commented 4 years ago

I've been using the BlazorInputFile and it's been working well - but something's changed and now the UI hangs on copying the file data to a memory stream. For a 1MB file this can take 5 seconds ish, when the UI is unresponsive. Have you come across anything like this before?

Lupusa87 commented 4 years ago

This helped me - await Task.Delay(1);

paulallington commented 4 years ago

Where did you add it sorry? Before or after the copyto memorystream?

Lupusa87 commented 4 years ago

I do not use it for exact same case. I did my version how to load file to .net memory, based on this repo, it wasn't updating UI as expected, so I used this snippet I was remembering from blazor early days. It is helping when UI should re-render but does not. I put it inside while loop to see loading progress. check this repo please https://github.com/Lupusa87/BlazorJsFastDataExchanger

paulallington commented 4 years ago

I tried popping it in but it didn't seem to make a difference. It seems to be that specific line on copying to a memory stream.

Lupusa87 commented 4 years ago

It is helping when UI is not updating, it forces component to refresh. Your case is different I guess.

paulallington commented 4 years ago

@Lupusa87 I created a sample project where I'm experiencing the issue https://github.com/paulallington/BlazorInputFileIssue (sample upload on the FetchData page)

Lupusa87 commented 4 years ago

Please check my demo and repo

paulallington commented 4 years ago

I've just compared the sample BlazorInputFile project, to the starter project in Visual Studio to see what the difference is. I was able to replicate the issue on the sample project by upgrading the package references:

from

<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="$(ClientPackagesVersion)" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="$(ClientPackagesVersion)" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="$(ClientPackagesVersion)" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="$(ClientPackagesVersion)" PrivateAssets="all" />

to

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0-preview3.20168.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0-preview3.20168.3" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0-preview3.20168.3" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview3.20168.3" />

So the conclusion must be that BlazorInputFile doesn't yet work with the latest version of Blazor (which would be fair enough if it's not been developed that far!)

Lupusa87 commented 4 years ago

@paulallington I have updated live demo link. If it will be helpful to you please check this demo and this repo. Based on Steve's work I have made my own library for loading files.