fix: Files above a certain size fail to upload using FluentInputFile

[Stephen-Lamb]

🐛 Bug Report

💻 Repro or Code Sample

Please see the attached zip file for a runnable solution.

1. Run the BlazorAppInputFileIssue project, go to the "Input file issue page", click the "Upload file" button and open a movie or image file of size 128KB or larger* (*on windows you can use the command 'fsutil' to create files of a certain size, provided you are an Administrator, e.g. "fsutil file createnew 128kb.jpg 131072" creates a 128KB zero-filled jpg file). After clicking the open button, wait one minute (A).

2. Restart the solution and try uploading a smaller file, such as a 16 KB file. Now the splash screen appears and the file is uploaded to the server correctly.

3. Close the solution, change the project to use FluentUI 4.12.1 and try the above test again . Now it works.

4. Try 4.13.1 again, comment out the 'ShowSplashScreenAsync' line in OnProgressChangeAsync() and try the above test again . Now it works.

🤔 Expected Behavior

(A) A splash screen showing the upload progress should appear and the file should be uploaded to the server.

😯 Current Behavior

(A) The "uploading..." splash screen does not appear, and after waiting one minute a "System.TimeoutException: Did not receive any data in the allotted time" exception occurs.

💁 Possible Solution

Not sure, but changing FluentInputFile.razor.cs to call the "OnProgressChange" callback with a 0 percent value before the stream is opened may fix the issue.

🔦 Context

We use the FluentInputFile component to upload files to the web server for import. We cannot use this release if files above a certain size cannot be uploaded.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser: Google Chrome
• .NET and Fluent UI Blazor library Version: 9.0 and 4.13.1

BlazorAppSplashScreenIssue.zip

]

[vnbaaij]

Eh, I see a Counter page with an 'Open splash screen button'. I do not see any upload button...

[Stephen-Lamb]

Ah sorry, I included the wrong project. Here's the right one...

BlazorAppInputFileIssue.zip

[MarvinKlein1508]

I can reproduce this behaviour with the provided code. However I've noticed that it works when you press F5 on the page once. This could indicate that something from the provided code needs be changed but I couldn't figure this out yet.

[vnbaaij]

This seems to be caused by an issue in the InputFile component (which we use internally). See also dotnet/aspnetcore#38842 for an issue with lots of comments. Gist of that is that you should use a stream to store the file. Thing is that you can't get the updated upload percentage.

Closing this as it is not a library issue but a Blazor 'limitation'

I have it work reliably on the first upload with this code:

@page "/input-file-issue"

@inject IDialogService DialogService

<PageTitle>Input file issue</PageTitle>

<h1>Input file issue</h1>

<FluentInputFile DragDropZoneVisible="false"
				 Mode="InputFileMode.SaveToTemporaryFolder"
				 Multiple="false"
				 AnchorId="MyUploadButton"
				 MaximumFileSize="@(2000 * 1024 * 1024)"
                 Accept=".mp4, .mov, .avi, .jpg, .jpeg, .png"
                 OnProgressChange="@OnProgressChangeAsync"
				 OnCompleted="@OnCompletedAsync" />

<FluentButton Id="MyUploadButton" Appearance="Appearance.Accent">
    Upload file
</FluentButton>

@code {
    private bool _uploading = false;
    private int _progressPercent;
    private DialogParameters<SplashScreenContent>? _splashParameters;
    private IDialogReference? _splashScreen;

    List<string> Files = new();

    protected override void OnInitialized()
    {
        _splashParameters = new()
            {
                Content = new SplashScreenContent()
                {
                    LoadingText = "Uploading...",
                    Title = "Uploading",
                    SubTitle = _progressPercent.ToString(),
                    DisplayTime = 0
                },
                Width = "400px",
                Height = "150px",
                PreventScroll = true,
                PreventDismissOnOverlayClick = true
            };
    }

    private async Task OnProgressChangeAsync(FluentInputFileEventArgs e)
    {
        _progressPercent = e.ProgressPercent;

        if (!_uploading)
        {
            // Show the "Uploading..." splash screen
            _uploading = true;
        }
        else
        {
            // Update the "Uploading..." splash screen
            if (_splashParameters != null) // && _splashScreen != null)
            {
                if (_splashScreen == null)
                {
                    _splashScreen = await DialogService.ShowSplashScreenAsync<UploadSplashScreen>(_splashParameters);
                    await Task.Delay(200);
                }

                _splashParameters.Content.SubTitle = _progressPercent.ToString();
                await DialogService.UpdateDialogAsync(_splashScreen.Id, _splashParameters);
            }
        }
    }

    private async Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files)
    {
        // Close the "Uploading..." splash screen
        if (_splashScreen != null)
        {
            // Delay a bit so you can actually see the splash screen...
            await Task.Delay(3000);

            await _splashScreen.CloseAsync();
        }

        _uploading = false;
        _progressPercent = 0;
		_splashParameters!.Content.SubTitle = _progressPercent.ToString();

        _splashScreen = null;

        // // For the demo, delete these files.
        // foreach (var file in files)
        // {
        //     file.LocalFile?.Delete();
        // }
    }
}

[Stephen-Lamb]

Unfortunately the provided fix is not making a difference for me. I'll try and have another look on the weekend (maybe trawl through that long post on InputFile issues) and see if I can come up with a solution.