fix: Partial upload of file in FluentInputFile

[JamesNK]

🐛 Bug Report

I'm trying to use FluentInputFile but have a problem where OnFileUploaded event is called but the file data is only partially available. BytesRead on the buffer doesn't match the expected file size.

What am I doing wrong? Or is this a bug?

💻 Repro or Code Sample

<FluentInputFile @ref="_inputFileRef"
                 AnchorId="import-button"
                 DragDropZoneVisible="false"
                 Accept=".zip,.json"
                 Multiple="false"
                 MaximumFileSize="@(100 * 1024 * 1024)"
                 Mode="InputFileMode.Buffer"
                 OnFileUploaded="OnFileUploadedAsync" />
<FluentButton Id="import-button"
              IconStart="@(new Icons.Regular.Size16.ArrowUpload())"
              Loading="@_isImporting"
              Title="@Loc[nameof(Dialogs.SettingsImportButtonText)]"
              aria-label="@Loc[nameof(Dialogs.SettingsImportButtonText)]">
    @Loc[nameof(Dialogs.SettingsImportButtonText)]
</FluentButton>

private async Task OnFileUploadedAsync(FluentInputFileEventArgs args)
{
    _isImporting = true;
    StateHasChanged();

    try
    {
        if (args.Buffer is not null)
        {
            var ms = new MemoryStream(args.Buffer.Data, 0, args.Buffer.BytesRead);
            await TelemetryImportService.ImportAsync(args.Name, ms, CancellationToken.None);
        }
    }
    finally
    {
        _isImporting = false;
        StateHasChanged();
    }
}

I also tried using stream mode, in which case the app hung while reading from the stream.
And I tried temporary file mode, and the file wasn't fully written to disk, and when I tried to read from it I got an error that the file was in use by another process.

🤔 Expected Behavior

All data is available.

😯 Current Behavior

Not all data is available.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

The built-in InputFile works:

<InputFile OnChange="OnInputFileChange" />

private static async Task OnInputFileChange(InputFileChangeEventArgs args)
{
    var file = args.File;
    const long maxSize = 50_000_000;

    await using var s = file.OpenReadStream(maxSize);
    await using var ms = new MemoryStream();

    await s.CopyToAsync(ms);

    if (ms.Length != file.Size)
    {
        throw new InvalidDataException("Partial upload");
    }

    ms.Position = 0;
    using var zip = new ZipArchive(ms);
    var entries = zip.Entries;
}

[MarvinKlein1508]

@JamesNK take a look on the Buffer documentation.
https://www.fluentui-blazor.net/InputFile

When working with buffers you need to use OnProgressChange EventCallback

[JamesNK]

Sorry, where does it say that I need to use them together? I couldn't see any docs that discuss that.

I'm using OnFileUploaded. And the docs say that event say:

Raise when a file is completely uploaded.

I expected to have a buffer fill with the data when that event is raised.

As I said in my issue, I also tried stream mode (it hung when I read from the stream in OnFileUploaded) and write to temporary file (the file wasn't completely written and still in use when I tried to use it in OnFileUploaded)

[MarvinKlein1508]

Perhaps @dvoituron or @vnbaaij can answer this then.