Blazor IBrowserFile OpenReadStream() blocks UI thread

161 views Asked by At

I am trying to create a functionality to enable users to upload large files (upto 5GB).

Technically, unrelated to this issue but I am uploading them to s3 via multipart upload [I've tried both low level API and high level API but same issue].

My assumption is that OpenReadStream() is blocking the UI thread which is not allowing the Invoke(StateHasChanged) to update the state and hence the progress bar state. The progress bar updates to 100 after the entire upload is complete.

Tried to keep the reading logic in a separate task but no help

I've tried to create a fiddle after removing s3 logic and other unnecessary stuff for issue replication

Replication on Playground (doesn't contain the s3 logic -> Each chunk created is to be uploaded to s3 but after each iteration the progress isn't updated on the UI): https://blazorrepl.telerik.com/ceEPmiFO42DzRtyS17

1

There are 1 answers

1
Ayush Pandey On

If this helps anyone else, I found it the hard way, for the fact that the UI state doesn't update, @HH's answer kinda helps on WebAssembly as it did on https://blazorrepl.telerik.com/cIYPmZOM55C9v6M338 (you can check the logs) BUT It doesn't solve the issue on Blazor Server because as soon as you open a stream from a file your data starts flowing from client to the server and if the file is large enough it kinda hangs everything as well as rules out the benefit of uploading to s3 in multipart directly from client as you get an additional overhead of sending the file from client to server first and there the processing happens.

SOLUTION : I would be investigating on a Javascript based solution with getting the secrets from AWS Secrets Manager for security on client side and advanced authentication mechanisms like S3AuthSigner. Might as well use a npm package in Blazor with some external utility.