Blazor WASM: File Upload - MultipartFormDataContent.Add() throws internal Invalid JSON exception

[Grizzlly]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Uploading a file results in Invalid JSON in internal code.

ImageUploader.razor:

<InputFile OnChange="UploadFiles" multiple  />

ImageUploader.razor.cs:

using BlazorTests.Shared;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;

namespace BlazorTests.Client.Shared
{
    public partial class ImageUploader : ComponentBase
    {
        private List<File> files = new();
        private List<UploadResult> uploadResults = new();
        private int maxAllowedFiles = 10;

        private bool shouldRender;

        protected override bool ShouldRender() => shouldRender;

        private void UploadFiles(InputFileChangeEventArgs e)
        {
            shouldRender = false;
            long maxFileSize = 1024 * 1024 * 15;
            var upload = false;

            using var content = new MultipartFormDataContent();


            foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
            {
                if (uploadResults.SingleOrDefault(
                    f => f.FileName == file.Name) is null)
                {
                    try
                    {
                        var fileContent =
                            new StreamContent(file.OpenReadStream(maxFileSize));

                        fileContent.Headers.ContentType =
                            new MediaTypeHeaderValue(file.ContentType);

                        files.Add(new() { Name = file.Name });
                        try // This is the block that throws. Note that the exception is not catched and the app breaks.
                        {
                            content.Add(
                            content: fileContent,
                            name: "\"files\"",
                            fileName: file.Name);
                        }catch(JsonException ex)
                        {
                            Console.WriteLine(ex.Message);
                        }

                        upload = true;
                    }
                    catch (Exception)
                    {
                        uploadResults.Add(
                            new()
                            {
                                FileName = file.Name,
                                ErrorCode = 6,
                                Uploaded = false
                            });
                    }
                }
            }

            shouldRender = true;
        }

        private class File
        {
            public string Name { get; set; }
        }
    }
}

The code is taken from documentation.

Expected Behavior

No exception, obviously.

Steps To Reproduce

https://github.com/Grizzlly/BlazorTests

Exceptions (if any)

When I debug and try to upload a file, I get this:

.NET Version

6.0.100

Anything else?

.NET SDK (reflecting any global.json):
Version: 6.0.100
Commit: 9e8b04bbff

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22000
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\6.0.100\

Host (useful for support):
Version: 6.0.0
Commit: 4822e3c3aa

.NET SDKs installed:
3.1.415 [C:\Program Files\dotnet\sdk]
5.0.104 [C:\Program Files\dotnet\sdk]
5.0.209 [C:\Program Files\dotnet\sdk]
5.0.303 [C:\Program Files\dotnet\sdk]
5.0.403 [C:\Program Files\dotnet\sdk]
6.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.0-rc.1.21451.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.0-rc.1.21451.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
https://aka.ms/dotnet-download

[Grizzlly]

Update: This might be a recent issue as file uploading used to work about 1 week ago and since then I have updated Visual Studio from the installer.

[TanayParikh]

Thanks @Grizzlly for the report. @guardrex have you had reports on this not working. I just copied the sample code from the upload component and put it into a clean blazorwasm app and I get this exception.

[guardrex]

I haven't had such a report.

Side Note (that shouldn't really matter perhaps): We don't implement as a partial class. @Grizzlly, did you try the code in a component in the Client app as shown in the doc to see if the same error occurs?

[TanayParikh]

did you try the code in a component in the Client app as shown in the doc to see if the same error occurs

Looks like it: https://github.com/Grizzlly/BlazorTests/blob/master/Client/Shared/ImageUploader.razor.cs

[guardrex]

Sorry that I didn't take a closer look. I'm 😩 and OOF until Monday, really. We don't show it implemented as a partial class. I can check and test a bit and see if I can repro this, but it wouldn't be until Monday.

[TanayParikh]

I wonder if this is related to #38962. However that's been around since .NET 5, which would imply this has been broken since then (which I find hard to believe).

Update: This might be a recent issue as file uploading used to work about 1 week ago and since then I have updated Visual Studio from the installer.

We only released the 6.0.101 patch last week, however you're running on 6.0.100 so that shouldn't have changed anything here. VS updates also don't play a part in this type of issue.

[TanayParikh]

I'm 😩 and OOF until Monday, really.

Oh didn't know, no worries at all, no rush here.

[guardrex]

No worries. I'm just out of hours for the week ...... and toast ..... 😄 ..... for the YEAR! 😆 LOL

I'll take a look first thing Monday morning.

[Grizzlly]

Updated to 6.0.101 and the problem persists. Also tried moving the code from the partial class to @code block but I get the same error.

VS updates also don't play a part in this type of issue.

Sorry, I was thinking about the WebAssembly NuGet package...

@guardrex @TanayParikh Apparently, downgrading the WebAssembly package to 6.0.0-preview.6.21355.2 appears to be working as it does not throw. For me, everything from preview 7 onwards, including 6.0.1, throws Invalid JSON. This is weird because it was working one week ago... Maybe it is a browser issue?

I have added edge://version output to the repo in browser-version.txt

As a side question,

We don't implement as a partial class.

Why would this make a difference? I have always used the code-behind approach and did not think that it might cause problems...