Blazor WebAssembly Does Not Support Large File Uploads

[Kevin-Andrew]

It is a pretty glaring omission, in my opinion, by you guys not to mention the fact that Blazor WebAssembly does not support uploading of large files, say 2 GB, to a remote server.

The section "Upload files to a server" (https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=webassembly#upload-files-to-a-server-1) neglects to mention anything about there being a file size limit, or more importantly, the fact that the file contents will be buffered completely into the client web browser's memory, therefore making large file uploads impossible. In other words, while the file's data may be streamed from the user's local file system, through JavaScript interop, and into the .NET WebAssembly code, attempting to upload that data to a remote server API (as shown in https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=webassembly#upload-controller-1), using the .NET HttpClient as shown in https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=webassembly#upload-component-1, using the StreamContent class, does not work for large files, say 2 GB or more. Not because of issues like, dotnet/aspnetcore#33638, but due to other reasons with the HttpClient in WebAssembly, specifically, the teams decision to use the browser's underlying fetch API to make web requests.

That type of limitation and restriction needs to be mentioned on the official documentation.

Please use the sample code from the current documentation page, bot the client WebAssembly code and the server API code for doing a file upload, change the long maxFileSize = 1024 * 15; variable that is defined in both from the worthless 15 KB (why would you ever think that a 15 KB file size limit would ever be useful in any kind of application?), change that variable to 10 GB, and then try uploading a 2 GB or 8 GB file. You will get an Out Of Memory exception.

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: 5ea474d5-234a-f393-8609-892a2deb5d2e
• Version Independent ID: c11d981c-05af-c19d-a333-feedd5978639
• Content: ASP.NET Core Blazor file uploads
• Content Source: aspnetcore/blazor/file-uploads.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Thanks for the issue, @Kevin-Andrew. Yes ... as you indicated from your product issue search, I thought that the product unit resolved the underlying problems with the hard limit for Blazor WASM, including any problems from the WASM client in a hosted WASM scenerio, per the work they did on dotnet/aspnetcore#33986.

We'll need to have Tanay take a look at this next week. I'm OOF for the weekend now, and I think he is either is OOF, too, or soon to be OOF for the weekend 🏃. Let me hit him on Monday for his input, and we'll see what's what and try to call out any limits and any workarounds for limits.

I'll quickly respond to ...

... the worthless 15 KB (why would you ever think that a 15 KB file size limit would ever be useful in any kind of application?)

That's purely for demonstration purposes and is helpful when testing demonstration code because only a small file is required to exceed the limit. How to set a limit was the only goal there, not to suggest some sort of typical value.

I agree with investigating everything else that you've remarked on for additional coverage. I do want any known, hard limits called out. I just thought that there were no such hard limits with the file streaming bits in place.

We'll find out next week. Stand-by ........

[guardrex]

@TanayParikh ... I thought you resolved the underlying issues that are in the OP. Whether or not that's right, do you want to move this to the PU repo for further investigation or provide me info on any hard limits that apply in the hosted WASM scenario?

[guardrex]

@TanayParikh ... Side-note here on process/progress. I really need to focus on the Security node in the 🦃 to 🎅🎆 period with as little else to work on as possible. That node ... and that whole subject, SECURITY ... is a 👹 to work on with lots of 😈 lurking to 💀⚰️ me along the way. WRT this issue on limits and the other issue we were discussing on previewing images for file uploads, I think we should hold off until early January, if possible. If we can accomplish a fix to this issue quickly (i.e., today! 😄), ok ... that's cool ... and the same thing for the preview images situation ... if you want to try and resolve it today (11/23) ... ok. Otherwise, I suggest that we resolve both of these in early January.

[guardrex]

And we're BACK! Happy New Year! 🍾🕺💃🎆

@TanayParikh ... On this issue, I thought that you resolved the underlying problems that are described in the OP of this issue. Are there any concerns about what we have at ...

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-7.0&pivots=webassembly#upload-files-to-a-server

... for large file (> 2 GB) file uploads?

If you want, I can run this in a local test to see if it fails. Alternatively, @Kevin-Andrew could be requested to open a PU issue for investigation with exact repro steps and a GH repro sample app. I'd kind'a prefer that because I'm still trying to get back to Blazor Security node updates 🏃🏃🏃 and hope not to be slowed down to any extent by other issues here.

[Kevin-Andrew]

@guardrex , I will create and publish a repo containing an example, minus the multi-gigabyte file that is needed, to reproduce this issue, then let you know.

[guardrex]

Ok ... that's cool. I can use a multi-GB file here if @TanayParikh wants me to try and repro it. It might be better for him to look into it tho. So what if it works for me? It will still be broken for you. Even if I can't get it to work and he thinks it should be fine, he'll need to look into it anyway. He'll be along in a bit to see what's what and let us know how to proceed.

[Kevin-Andrew]

@guardrex, @TanayParikh , I have created https://github.com/Kevin-Andrew/LargeFileUpload

I'm also attaching it as a Zip file to this post.
LargeFileUpload-master.zip

Some sample output should look like the following:

Again, I realize this is a limitation in the Blazor implementation due to using the browser's fetch API, as I mentioned, and has been mentioned in several other places, like dotnet/aspnetcore#31873 (comment). So I don't know what you might be referring to about potentially "I thought that you resolved the underlying problems that are described in the OP of this issue."

While that would be great if you guys have done something to fix this problem, my main ask here is that this limitation be clearly documented on places like: https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-7.0&pivots=webassembly

[guardrex]

Thanks for that full report, @Kevin-Andrew. Yes, I thought that this was reported and that Tanay had fixed something, but it might have been a different file size-based problem. He'll be along in a bit.

Tanay, a few points to consider ...

• What's the scope of the file size problem for our examples? I assume that we need to address this for both streaming to a server examples:
  • Blazor Server: https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-7.0&pivots=server#upload-files-to-a-server
  • Blazor WASM: https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-7.0&pivots=webassembly#upload-files-to-a-server
  • What about the FileUpload1 component example for Blazor Server? Does that also suffer this limitation?
• Related to the prior point, we might need to address a content layout problem: We have a lot of streaming content at the top of the article, then have the FileUpload1 component, which doesn't move a file from the client in the client-side WASM case. I wonder if for the WASM pivot that we should have that FileUpload1 component at the top of the article, above the early content on streaming? I'll have a better idea if a layout change is needed after you let me know how FileUpload1 processes on Blazor Server.
• Seems like a viable workaround is to use an external service, as we describe in https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-7.0&pivots=server#upload-files-to-an-external-service. If we place content on a file size limit, can we suggest that as a workaround?
• Javier said, "I believe that is a browser limitation and you'll have to plan around it. Edge/Chrome added a feature in chrome 85 to support request streaming see here for details." Shall we call that Edge/Chrome piece out? Cross-ref: [Blazor] [WASM] Large File Upload Via Stream not Work as Expected + Memory Leak aspnetcore#31873 (comment)

[guardrex]

@Kevin-Andrew ... I finally 🏃😅 reached this as I'm wrapping up last year's backlog of issues now. I found another issue where Javier said the same thing ... dotnet/aspnetcore#35899.

Tanay has moved on to a new role elsewhere, so I'll work this into a PR tomorrow morning calling Mackinnon to review it.

I think the remarks that I add can refer to the long-range tracking issue at dotnet/runtime#36634 because devs can mark a 👍 on it to let them know of the interest in it. Then, I'll open up a long range tracking note reminding myself to check back periodically and see how/if it's progressing.

[Kevin-Andrew]

Okay, thanks.