Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File uploads file size limitations #28306

Merged
merged 15 commits into from
Feb 16, 2023
Merged

File uploads file size limitations #28306

Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6f72c65
File uploads file size limitation
guardrex Feb 4, 2023
f129415
Updates
guardrex Feb 4, 2023
bddd72d
Updates
guardrex Feb 4, 2023
4f3b6fd
Updates
guardrex Feb 4, 2023
7839a46
Updates
guardrex Feb 4, 2023
ce8ca0f
Updates
guardrex Feb 4, 2023
5c3dc08
Updates
guardrex Feb 4, 2023
9e6a359
Updates
guardrex Feb 6, 2023
d354318
Updates
guardrex Feb 6, 2023
2fa5dba
Updates
guardrex Feb 6, 2023
192dc48
Updates
guardrex Feb 6, 2023
f86eded
Updates
guardrex Feb 6, 2023
50238dd
Updates
guardrex Feb 6, 2023
e30b34a
Updates
guardrex Feb 6, 2023
6e6b5c9
Updates
guardrex Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions aspnetcore/blazor/file-uploads.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Learn how to upload files in Blazor with the InputFile component.
monikerRange: '>= aspnetcore-5.0'
ms.author: riande
ms.custom: mvc
ms.date: 12/17/2022
ms.date: 02/04/2023
uid: blazor/file-uploads
zone_pivot_groups: blazor-hosting-models
---
Expand Down Expand Up @@ -46,13 +46,6 @@ To read data from a user-selected file, call <xref:Microsoft.AspNetCore.Componen

<xref:Microsoft.AspNetCore.Components.Forms.IBrowserFile.OpenReadStream%2A> enforces a maximum size in bytes of its <xref:System.IO.Stream>. Reading one file or multiple files larger than 500 KB results in an exception. This limit prevents developers from accidentally reading large files into memory. The `maxAllowedSize` parameter of <xref:Microsoft.AspNetCore.Components.Forms.IBrowserFile.OpenReadStream%2A> can be used to specify a larger size if required.

:::moniker range="< aspnetcore-6.0"

> [!NOTE]
> In ASP.NET Core 5.0, the maximum supported file size is 2 GB. In ASP.NET Core 6.0 or later, the framework doesn't limit the maximum file size.

:::moniker-end

If you need access to a <xref:System.IO.Stream> that represents the file's bytes, use <xref:Microsoft.AspNetCore.Components.Forms.IBrowserFile.OpenReadStream%2A?displayProperty=nameWithType>. Avoid reading the incoming file stream directly into memory all at once. For example, don't copy all of the file's bytes into a <xref:System.IO.MemoryStream> or read the entire stream into a byte array all at once. These approaches can result in performance and security problems, especially for Blazor Server apps. Instead, consider adopting either of the following approaches:

* On the server of a hosted Blazor WebAssembly app or a Blazor Server app, copy the stream directly to a file on disk without reading it into memory. Note that Blazor apps aren't able to access the client's file system directly.
Expand Down Expand Up @@ -92,6 +85,38 @@ await blobContainerClient.UploadBlobAsync(

A component that receives an image file can call the <xref:Microsoft.AspNetCore.Components.Forms.BrowserFileExtensions.RequestImageFileAsync%2A?displayProperty=nameWithType> convenience method on the file to resize the image data within the browser's JavaScript runtime before the image is streamed into the app. Use cases for calling <xref:Microsoft.AspNetCore.Components.Forms.BrowserFileExtensions.RequestImageFileAsync%2A> are most appropriate for Blazor WebAssembly apps.

## File size read and upload limits

:::moniker range=">= aspnetcore-6.0"

:::zone pivot="server"

There's no file size read or upload limit for the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component in Blazor Server apps.

:::zone-end

:::zone pivot="webassembly"

Prior to the release of ASP.NET Core 6.0, the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component had a file size read limit of 2 GB. In ASP.NET Core 6.0 or later, the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component has no file size read limit.

In all versions of ASP.NET Core to date, Blazor WebAssembly reads the file's bytes into a single JavaScript array buffer when marshalling the data from JavaScript to C#, which is limited to 2 GB or to the device's available memory. Large file uploads (> 250 MB) may fail.

To resolve the file size upload limitation in Blazor WebAssembly apps, we recommend implementing file uploads entirely in JavaScript by [streaming requests with the Fetch API](https://developer.chrome.com/articles/fetch-streaming-requests/).

:::zone-end

:::moniker-end

:::moniker range="< aspnetcore-6.0"

The maximum supported file size for the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component is 2 GB.

To resolve the file size read limitation, we recommend implementing file uploads entirely in JavaScript by [streaming requests with the Fetch API](https://developer.chrome.com/articles/fetch-streaming-requests/).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@javiercn @SteveSandersonMS Is this the right recommendation givent he current level of browser support? Firefox and Safari don't support this yet, right? If you want to support all browsers I believe you need to do some sort of file chunking that you coordinate with the server, correct?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure. Which specific browser support limitation are you referring to?

I see that WritableStream is usable on current Safari/Firefox. Is that sufficient for being able to do an arbitrary-length streaming upload, or is there some other limitation we face?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FF and Safari don't support it yet. See dotnet/runtime#36634 (comment)

Copy link
Collaborator Author

@guardrex guardrex Feb 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall I comment-out the recommendation for now and open a tracking issue on the Safari and FF issues (and the following are just for positions) ...

When I detect that Safari and FF have support, I can surface this sentence.

I have an existing tracking remark on my .NET 8 issue to keep an eye on runtime support. When that happens, I can remove all of the size limitation remarks for future versions of this content.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm commenting-out the line for now and will revisit this line for the .NET 8 release ... and also to keep an 👁️ on Fetch streaming support for FF/Safari. This is tracked by my .NET 8 tracking issue.


:::moniker-end

## Upload files example

The following example demonstrates multiple file upload in a component. <xref:Microsoft.AspNetCore.Components.Forms.InputFileChangeEventArgs.GetMultipleFiles%2A?displayProperty=nameWithType> allows reading multiple files. Specify the maximum number of files to prevent a malicious user from uploading a larger number of files than the app expects. <xref:Microsoft.AspNetCore.Components.Forms.InputFileChangeEventArgs.File?displayProperty=nameWithType> allows reading the first and only file if the file upload doesn't support multiple files.

> [!NOTE]
Expand Down