WinUI WebView2 causes crash with HTML input file while debugging after 30 seconds

[Eilon]

Description

A WinUI app with WebView2 that hosts HTML with an <input type="file" ... /> element will cause the app to crash and not able to debug it.

Version SDK: Runtime: Framework: OS:

Repro Steps

1. Create new WinUI3 Packaged app
2. Change the main XAML to be <WebView2 Source="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file"></WebView2> (and remove any other code from the CS file that isn't relevant)
3. Run the app from VS with the debugger (press F5)
4. In the app click the "Choose file" in the loaded HTML page
5. Don't pick any files. Just wait a minute or two.

Result: The app will crash and you cannot debug it. If you try to debug it, you get all kinds of weird exceptions from VS itself (and it weirdly loads in Dark Mode... no idea why).

Expected: No crash.

Screenshots

Additional context

This does not repro in these similar scenarios:

• WinUI app run without the debugger doesn't crash
• WinUI app run from Start Menu doesn't crash
• WPF + WebView2 doesn't crash

AB#44977210

[champnic]

Thanks for the bug report @Eilon. Looks like the workaround we had to do for opening the FileDialog is causing a potential re-entrancy issue that is being flagged when debugging with a _DebugBreak() and this debug output message: "Running a message loop synchronously in an event handler in Webview can cause reentrancy issue. Please refer to https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/threading-model#re-entrancy for more information about threading model in WebView2 and how to enable native code debugging for this scenario. A breakpoint instruction (__debugbreak() statement or a similar call) was executed in WinUI3App1.exe."

The nested loop timer looks to be 30 seconds, which is why we see this after keeping the dialog open for a bit.

I've opened this bug on our backlog to take a look.

[CaseAlexander]

If there's any debugging information or testing needed, please let me know and my team and I will help. We're severely impacted by this issue at the moment. Developing a Maui-Blazor and a Blazor-Server application where the client will be selecting and uploading many files. Our debug development sessions suffer frequent crashes because of this issue. Having to restart the application frequently is adding many minutes to the fix/build/test cycle.

[daghsentinel]

I am experiencing this too, also developing Blazor hybrid apps. Issue is also present when using .NET 8 RC1

[NJullienSweet]

Hello @champnic Do you have any news about this issue? Currently with a MAUI+Blazor app, you can't drag and drop files because there is this issue: #2805 And you also can't select a file because of this one.

To sum up, there is no way to let the user choose a file in a conventional way, making MAUI+Blazor unusable at the moment.

If you need any help to reproduce or any other thing, please feel free to ping me, I'll gladly help. For now, my team and I are stuck and the development has been halted.

[fairjm]

@NJullienSweet hi if you use maui maybe you can choose to use FilePicker.
here is my code exmaple:

<MudFab Size="Size.Small"
        HtmlTag="label"
        Color="Color.Secondary"
        Icon="@Icons.Material.Filled.Image"
        Label="Load picture"
        OnClick="() => PickAndShow(PickOptions.Images)"
        />

@code { ....
    public async Task PickAndShow(PickOptions options)
    {
        try
        {
            var result = await FilePicker.Default.PickAsync(options);
            if (result != null)
            {
                await using var stream = await result.OpenReadAsync();
                var dotnetImageStream = new DotNetStreamReference(stream);
                _objUrl = await JS.InvokeAsync<string>("createObjectURL", dotnetImageStream);
            }
            return;
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex);
        }
    }
}

[Cfun1]

Hi @champnic is there any update on this issue ?

~~@fairjm you should mention that in order to work with your example one should add a dependency to MudBlazor. FilePicker is one thing and MudFab (from your example) is totally different thing.~~

[fairjm]

Hi @champnic is there any update on this issue ?

@fairjm you should mention that in order to work with your example one should add a dependency to MudBlazor. FilePicker is one thing and MudFab (from your example) is totally different thing.

MudFab is just a button, I copy the code from my project. It doesn't matter what component/html element to use, just see the callback method.

[Cfun1]

@fairjm my bad I was confused, thanks. In this case also FolderPicker could be used for folders.

[Wayzware]

@champnic is there any update on this issue?

I've been experiencing it for a while now with a winforms - blazor hybrid project using .NET 6 and now .NET 8.

[Cfun1]

@champnic is there any update on this? Blazor+MAUI hybrid is still unusable https://github.com/dotnet/maui/issues/15224

[daghsentinel]

@Cfun1 try out the suggestion made by @fairjm. It works fine here on Blazor hybrid.

[Cfun1]

@daghsentinel I can't do it easily because my component is in a razor class library (project type Microsoft.NET.Sdk.Razor) which is consumed by MAUI+Blazor hybrid project.

[Conbag93]

It's been 14 months since this issue was raised, and people developing MAUI Blazor projects with file uploads are still unable to debug their applications.

This is not a niché use-case, and the suggested workaround of using the MAUI FilePicker is unsuitable if you ever want your blazor component to also be consumed in a web application.

Is there any update on this? I can't really overstate how problematic this is.

[daghsentinel]

@champnic - anything you can do?

[garrenf]

@NJullienSweet hi if you use maui maybe you can choose to use FilePicker. here is my code exmaple:

<MudFab Size="Size.Small"
        HtmlTag="label"
        Color="Color.Secondary"
        Icon="@Icons.Material.Filled.Image"
        Label="Load picture"
        OnClick="() => PickAndShow(PickOptions.Images)"
        />

@code { ....
    public async Task PickAndShow(PickOptions options)
    {
        try
        {
            var result = await FilePicker.Default.PickAsync(options);
            if (result != null)
            {
                await using var stream = await result.OpenReadAsync();
                var dotnetImageStream = new DotNetStreamReference(stream);
                _objUrl = await JS.InvokeAsync<string>("createObjectURL", dotnetImageStream);
            }
            return;
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex);
        }
    }
}

Can't use that either because triggering the filepicker as admin causes the application to crash. It's all buggy garbage.