<FluentInputFile> component unable to open file when using Mode.Buffer

[Nehakrg]

<FluentInputFile 
                 DragDropZoneVisible="false"
                 Mode="InputFileMode.Buffer"
                 MaximumFileSize=10485760
                 BufferSize="10485760" 
                 Multiple="false"
                 AnchorId="MyUploadButton"
                 Accept=".jpg,.doc,.docx,.pdf,.jpeg,.gif"
                 OnCompleted="@OnCompletedAsync" />

I’m using the FluentInputFile component to upload files and save the data from file.Buffer.Data to a file on a SharePoint site(the SharePoint API requires the file content in byte array format). However, I’m unable to open the file because it appears to be damaged. I also tried saving file.Buffer.Data to a local file, but I was still unable to open it. Here’s the code I used to save it locally.

      FluentInputFileEventArgs file
       var buffer = new byte[file.Size];
       buffer = file.Buffer.Data;
       var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.Name);
       System.IO.File.WriteAllBytes(path, buffer);

[vnbaaij]

You should probably create an issue for this. Please make sure to supply working reproduction code and not just some group of lines.

[dvoituron]

@Nehakrg You have a full example of this Buffer mode on our Demo site: https://fluentui-blazor.net/inputfile
And this code works correctly.

<FluentInputFile @ref="@myFileByBuffer"
                 AnchorId="MyUploadBuffer"
                 DragDropZoneVisible="false"
                 Mode="InputFileMode.Buffer"
                 Multiple="true"
                 MaximumFileSize="@(1000 * 1024 * 1024)"
                 Accept=".mp4, .mov, .avi"
                 OnProgressChange="@OnProgressChangeAsync"
                 OnCompleted="@OnCompleted" />

<FluentProgress Visible="@(progressPercent > 0)" Min="0" Max="100" Value="@progressPercent" />
<FluentLabel Alignment="HorizontalAlignment.Center">
    @progressTitle
</FluentLabel>

<FluentButton Appearance="Appearance.Accent" Id="MyUploadBuffer">
    Upload files
</FluentButton>

<FluentButton @onclick="@((e) => IsCanceled = true)">
    Cancel
</FluentButton>

@if (Files.Any())
{
    <h4>File(s) uploaded:</h4>
    <ul>
        @foreach (var file in Files)
        {
            <li>
                @file.Value
            </li>
        }
    </ul>
}

@code
{
    FluentInputFile? myFileByBuffer = default!;
    int? progressPercent;
    string? progressTitle;
    bool IsCanceled;

    Dictionary<int, string> Files = new();

    async Task OnProgressChangeAsync(FluentInputFileEventArgs file)
    {
        progressPercent = file.ProgressPercent;
        progressTitle = file.ProgressTitle;

        // To cancel?
        file.IsCancelled = IsCanceled;

        // New file
        if (!Files.ContainsKey(file.Index))
        {
            var localFile = Path.GetTempFileName() + file.Name;
            Files.Add(file.Index, localFile);
        }

        // Write to the FileStream
        await file.Buffer.AppendToFileAsync(Files[file.Index]);
    }

    void OnCompleted(IEnumerable<FluentInputFileEventArgs> files)
    {
        progressPercent = myFileByBuffer!.ProgressPercent;
        progressTitle = myFileByBuffer!.ProgressTitle;

        // For the demo, delete these files.
        foreach (var file in Files)
        {
            File.Delete(file.Value);
        }
    }
}