Extremely Slow file upload to a Blazor Server app deployed as Azure Web App

Question

I created a Blazor Server app that would allow end users to upload large excel files that would be consumed in downstream logic.

I use a the standard .NET core 5 InputFile component to upload the excel file to the app, within the app, I read the stream async, copy it into a memory stream and then use ExcelDataReader to convert it into dataset.

The challenge I see is that the upload takes a long time specifically when App is deployed to Azure. To dig a bit deeper into what exactly was consuming the time, I track progress of the StreamCopy operation:

The following code handles my upload:

private async Task OnInputFileChange(InputFileChangeEventArgs e)
{

    this.StateHasChanged();


    IReadOnlyList<IBrowserFile> selectedFiles;
    selectedFiles = e.GetMultipleFiles();

    foreach (var file in selectedFiles)
    {

        DataSet ds = new DataSet();
        {
            bool filesuccesfullRead = false;
            //allowing a 100MB file at once
            var timer = new Timer(new TimerCallback(_ =>
            {
                if (fileTemplateData.uploadProgressInfo.percentage <= 100)
                {
                    // Note that the following line is necessary because otherwise
                    // Blazor would not recognize the state change and not refresh the UI
                    InvokeAsync(() =>
                    {

                        StateHasChanged();
                    });
                }
            }), null, 1000, 1000);



            using (Stream stream = file.OpenReadStream(104857600))
            using (MemoryStream ms = new MemoryStream())
            {
                
                fileTemplateData.uploadProgressInfo = new GlobalDataClass.CopyProgressInfo();
                await ExtensionsGeneric.CopyToAsync(stream, ms, 128000, fileTemplateData.uploadProgressInfo);
                System.Text.Encoding.RegisterProvider(System.Text.CodePagesEncodingProvider.Instance);

                try
                {
                    using (var reader = ExcelReaderFactory.CreateReader(ms))
                    {
                        ds = reader.AsDataSet(new ExcelDataSetConfiguration()
                        {
                            ConfigureDataTable = _ => new ExcelDataTableConfiguration()
                            {
                                UseHeaderRow = false
                            }
                        });
                        filesuccesfullRead = true;
                    }

                }
                catch (Exception ex)
                {
                    Message = "Unable to read provided file(s) with exception " + ex.ToString();
                }

                stream.Close();
                ms.Close();
            }
        }
        ds.Dispose();
        ds = null;
    }

    fileTemplateData.fileloading = false;

    this.StateHasChanged();


}

Here is the CopyToAsync Function which is same as regular stream copy but provides progress tracking:

 public static async Task CopyToAsync(this Stream fromStream, Stream destination, int bufferSize, GlobalDataClass.CopyProgressInfo progressInfo)
    {
        var buffer = new byte[bufferSize];
        int count;
        progressInfo.TotalLengthinBytes = fromStream.Length;


        while ((count = await fromStream.ReadAsync(buffer, 0, buffer.Length)) != 0)
        {
            progressInfo.BytesTransfered += count;
            progressInfo.percentage = Math.Round((((double)progressInfo.BytesTransfered /(double) progressInfo.TotalLengthinBytes) * 100), 1);

            await destination.WriteAsync(buffer, 0, count);

        }
    }

public class CopyProgressInfo
    {
        public long BytesTransfered { get; set; }

        public long TotalLengthinBytes { get; set; }

        public double percentage { get; set; }
        public DateTime LastProgressUpdateVisualized = new DateTime();
    }

Now Let me put the question:

1. Using this code, I achieve a fair upload speed when the app is running on a local host(A 75MB file with tonnes of data would upload in around 18 seconds). When the app is deployed to an Azure App service plan, the same file would take more than 10 minutes to upload, which makes me feel something is seriously wrong. Using progress tracking, I was able to confirm that the time is being consumed by the CopytoAsync function and not the logic after that.

Here's what I have investigated:

1. I checked my internet upload speed on two seprate connections with a stable upload bandwidth of more than 25Mbps, so this is not an issue.
2. I upgraded the app service plan to a higher tier momentarily to see if upload bandwidth was somehow linked with Azure App Service plan tier, even increasing it to a powerful P3V2 tier made no difference.
3. To see if the specific Datacenter where my App service sits in was offering poor upload performance from my part of the world, I checked average upload speed using https://www.azurespeed.com/Azure/UploadLargeFile and a 75Mb file would upload in around 38 seconds to Azure West Europe Datacenter. So I donot see if the connectivity is the problem here.

With all that is mentioned above, what could be causing such a poor file upload speed when uploading the file onto a Deployed Blazor Server Web App.

Answer 1

I don't see such performance impact. I upload to azure blob storage though.

My implementation summary:

1. razor component called imageUpload.razor that contains public async Task HandleFileSelected(InputFileChangeEventArgs e) and calls a service like: await hService.UploadImgToAzureAsync(imageFile.OpenReadStream(), fileName);

2. service that contains the following: public async Task UploadImgToAzureAsync(Stream fileStream, string fileName) { return await ImageHelper.UploadImageToStorage(fileStream, fileName); }

3. ImageHelper calls AzureStorage.cs

4. AzureStorage.cs that handles calls UploadFromStreamAsync

Answer 2

I finally managed to improve the upload performance, unfortunately Blazor's built in InputFile component doesn't seem to be designed very well for large file uploads specially when the app has been deployed. I used Tewr's upload file component with a larger buffer size(128000) and that has significantly improved performance(3X reduction). Tewr's sample code is available here:

https://github.com/Tewr/BlazorFileReader/blob/master/src/Demo/Blazor.FileReader.Demo.Common/IndexCommon.razor