fix: FluentInputFile JSInterop error

[StevenRasmussen]

🐛 Bug Report

Getting the following error from a FluentInput when loading the page:

InvalidOperationException: JavaScript interop calls cannot be issued at this time. 
This is because the component is being statically rendered. 
When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, CancellationToken cancellationToken, object[] args)
Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile.OnInitializedAsync() in FluentInputFile.razor.cs
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)
Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)
Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, out Exception renderFragmentException)
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
CvhsBands.Components.OverlayProvider.HideOverlay()
CvhsBands.Components.CustomComponentBase.HideOverlay()
CvhsBands.Components.CustomComponentBase.OnInitializedAsync()
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.WaitForResultReady(bool waitForQuiescence, PrerenderedComponentHtmlContent result)
Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.RenderEndpointComponent(HttpContext httpContext, Type rootComponentType, ParameterView parameters, bool waitForQuiescence)
System.Threading.Tasks.ValueTask<TResult>.get_Result()
Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)
Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)
Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c+<<InvokeAsync>b__10_0>d.MoveNext()
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|7_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

💻 Repro or Code Sample

Internal repo, unable to share

🤔 Expected Behavior

Should not throw an error.

🌍 Your Environment

FluentUI v4.4.1

[vnbaaij]

Respect that you repo is internal, but we really need a runable minimal code reproduction! Help us to help you!!

There is no details supplied at all to go on. Server/Webassembly/Auto?, Debug/Release?

[StevenRasmussen]

I was hoping that the stack trace might be enough for you to troubleshoot this... I'll see if I can't put something together but it may be a while. FYI this is Server interactive, Debug.

[dvoituron]

Weird, Could you double-check the rendering mode? Because the message says

This is because the component is being statically rendered.

[Nehakrg]

I encountered a similar issue when using @rendermode InteractiveServer. Specifically, the error occurred while utilizing FluentInputFile with AnchorId.

<FluentInputFile @ref="@myFileUploader" DragDropZoneVisible="false" Mode="InputFileMode.SaveToTemporaryFolder" Multiple="true" AnchorId="MyUploadButton" MaximumFileSize="@(100 * 1024 * 1024)" Accept=".mp4, .mov, .avi" OnProgressChange="@(e => { progressPercent = e.ProgressPercent; progressTitle = e.ProgressTitle; })" OnCompleted="@OnCompleted" />

[vnbaaij]

Closing. Stale.