Completed
Last Updated: 11 Nov 2023 09:09 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
Ben
Created on: 12 Oct 2022 21:50
Category: FileSelect
Type: Bug Report
6
Extremely long wait trying to get byte[] contents from FileSelect's FileSelectInfo.Stream

Hello,

I'm trying to add image previewing to our .Net 6.0.8 Blazor Wasm app using the Telerik Blazor UI FileSelect component. I'd like to be able to create a local url for previewing and also hold onto the file's contents for saving later. There currently doesn't seem to be any great examples/references for doing this using the Telerik FileSelect locally. So, I started looking at the official MS Blazor documentation around images, file uploads and downloads - the most relevant content seemed to be around giving a file's stream to a DotNetStreamReference, then handing it off to JS interop to create a URL from a Blob.

It was already quite slow when testing with a 4KB~ image, but became absolutely unusable once testing things with a larger 4MB~ image. To rule out the Telerik FileSelect's involvement I started testing with the native Blazor FileInput component. I noticed that the sending the DotNetStreamReference to JS interop took a long time itself and learned that .Net 6 added the ability to pass a byte[] almost instantly to JS interop. I was then able to see image previews quickly using the native FileInput component while hosting a file from a byte[]. With this new knowledge in hand I attempted to migrate this new workflow over to the Blazor FileSelect component, but unfortunately there doesn't seem to be a faster way to get a byte[] from the FileSelectFileInfo's Stream.

I'm seeing similar performance issues between the native FileInput using a stream and the Telerik FileSelect using a stream or byte[]. These are both taking around 4-5 minutes to host a file with a locally generated url and preview the image. In contrast I'm seeing wait times around 3-12 seconds using the native FileInput/IBrowserFile, this

byte[] iBrowserFileBytes = new byte[iBrowserFile.Size];
await iBrowserFile.OpenReadStream(maxFileSize).ReadAsync(iBrowserFileBytes);

Please see the attached Blazor Wasm code to recreate the issue. I've included 6 file inputs to test out the difference in performance between each scenario, but the most important file input is the "Blazor InputFile - HostFromByteArray" which shows the most promise. Attached is also the larger file that I was testing against. This might be a bug or maybe I'm just not reading from the FileSelectFileInfo's Stream in the most efficient way.

The only relevant code not attached is likely just this one from Program.cs:

// ...
builder.Services.AddSingleton<IJSInProcessRuntime>(services => (IJSInProcessRuntime)services.GetRequiredService<IJSRuntime>());
// ...
4 comments
ADMIN
Radko
Posted on: 23 Feb 2023 09:21

Hi all,

We wanted to post an update on this - we most certainly want to act on this and improve the performance of our ReadAsync implementation. However, as Svetoslav has already mentioned, we can only do so once we drop the compatibility for netcoreapp3.1.

As soon as we have more news, we will update the status of this item.

Regards, Radko Stanev Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
ADMIN
Svetoslav Dimitrov
Posted on: 26 Oct 2022 13:43

Hello Ben,

I am sorry to report that there is no suitable workaround for this issue. Our implementation of the ReadAsync event is done in a matter that it can run under the .NET 3.1.x versions. When we are able to drop the support of that .NET version we can easily migrate to a more performant way of implementation. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Ben
Posted on: 19 Oct 2022 18:16

Hi Svetoslav,

Thanks for taking the time to review and appreciate my example! Glad to know I'm not out to lunch on this. The ReadAsync method being the issue was my theory as well, so I would agree with you on what would need to be investigated.

Assuming there might not be a fix put in place for some time would there happen to be a recommended workaround for now? Otherwise I will continue to work on making my own component around the native Blazor FileSelect component instead. Unfortunately this Telerik component doesn't seem to have much value until exporting with reasonable file sizes is available - although it does look quite nice.

Thanks,

Ben

ADMIN
Svetoslav Dimitrov
Posted on: 19 Oct 2022 14:13

Hello Ben,

First of all, thank you for the great explanation and the effort to provide us with a runnable code snippet where we can easily test the behavior.

I can confirm that this is a valid bug report and as a small token of appreciation, I have added Telerik Points to your account.

The culprit behind this is our own implementation of the ReadAsync() method. The exact reasons are still to be fully investigated so I would not be able to provide much information on why exactly this happens.

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.