(C# ASP.NET Core) Uploading large files with Streaming and JavaScript based Progress bar

Source Code on Github

Please refer the github repository  file-upload-streamed

The Problem with IFormFile

These are the steps that ASPNET Core takes: (1) File uploads of sizes exceeding 64kb are saved to a temporary file on the same ASPNET Core server. (2) In the next step, ASPNET Core creates an IFormFile and makes it available to you (3) your code copies the file to a location of your choice.

This can become problematic if files are too large, and there are too many concurrent users - the server could run out of memory as well as disk space for the temporary files in step (1).

Another problem is a responsive user interface. You will not be able to show a progress bar showing percentage completion.

Video Explanation (see it happen!)

Please watch the following youtube video:

Solving the Problem

Crux: Stream the bytes from the request body directly to the final location of your choice, bypassing the intermediate storage and IFormFile.

You will have to follow these steps -

1. Add a filter for generating anti-forgery token, and also remove the filter for form-model binding because we shall be writing our own code to read the multipart sections. The anti-forgery token is saved in a cookie called RequestVerificationToken. This cookie is later read in the javascript code for uploading the file.

2. Inside the razor page (cshtml file), write the file upload code with javascript XMLHttpRequest. Progress bar is updated on onprogress event.

3. In the OnPostAsync method (of the IndexModel class cshtml.cs), use the built-in MultipartReader [namespace Microsoft.AspNetCore.WebUtilities] to stream the HttpContext.Request.Body to a file.

The Source of this Article

This article is based on the following two sources.

1. This whole article is worth reading: Upload files in ASP.NET Core
2. The above article links to a project file StreamedSingleFileUploadDb, which contains the main plan.