FileSelect ReadAsync Method Throws JsonException

Environment

Product	FileSelect for Blazor
Version	5.0.0 and above

Description

This knowledge base article deals with the following issues:

• The FileSelect component's file stream ReadAsync method throws Microsoft.JSInterop.JSException.
• FileSelect file stream reading fails when using builder.Host.UseServiceProviderFactory.
• An exception occurs when trying to upload files through Blazor FileSelect with Autofac dependency injection enabled.

Error Message

Microsoft.JSInterop.JSException: JSON serialization is attempting to deserialize an unexpected byte array.
    at System.Threading.Tasks.ValueTask`1.get_Result()
    at Telerik.Blazor.Components.FileSelect.Stream.FileInfoStream.<ReadBytesAsync>d__24.MoveNext()

Cause

The problem can occur when an Inversion of Control (IoC) container interferes with the SignalR hub operation. For example, we have received reports about Autofac:

Program.cs

builder.Host.UseServiceProviderFactory(new AutofacServiceProviderFactory());

The problem does not occur in FileSelect versions before 5.0.0, because the component used a slower legacy file management mechanism with string instead of byte[].

The following resources provide additional details:

• Technical description of the cause in the aspnetcore GitHub repository
• Closed issue in the aspnetcore GitHub repository
• Similar StackOverflow thread about the Blazor InputFile component.

Solution

To avoid the error, disable implicit parameters from services in the Blazor hub configuration:

Program.cs

builder.Services.AddHubOptions(options =>
{
    options.DisableImplicitFromServicesParameters = true;
});

See Also

• FileSelect Overview