In Blazor SeverMode use FluentInputFile

[Gloria-GK-406]

I use FluentInputFile to upload file in blazorserverMode.

 @using IPTV.Web.Data
@using IPTV.Core.Extensions
@rendermode InteractiveAuto

<FluentStack Orientation="Orientation.Vertical"
             VerticalGap="8">
    <FluentTextField Label="订阅集名称"
                     Value="@PlaylistSet.Name"
                     ValueChanged="OnNameChanged"
                     Style="width: 100%" />
    <FluentStack>
        <FluentInputFile @ref="@FileUploader"
                         DragDropZoneVisible="false"
                         Mode="InputFileMode.Stream"
                         MaximumFileSize="@(10*1024*1024)"
                         AnchorId="UploadButton"
                         Accept=".m3u"
                         Multiple="false"
                         OnProgressChange="@OnProgressChangeAsync"
                         OnFileUploaded="@OnFileUploaded"
                         OnCompleted="@OnCompleted" />

        @if(UploadFile == null)
        {
            <FluentButton Id="UploadButton"
                          Appearance="Appearance.Accent">添加文件</FluentButton>
        }
    </FluentStack>
    <FluentProgress Min="0" Max="100" Value="@progressValue" Visible="@(progressValue > 0)"/>
    @if (UploadFile != null)
    {
        <FluentCard Style="max-height: 300px; overflow-y: auto;">
            <FluentStack Orientation="Orientation.Vertical">
                <FluentLabel Typo="Typography.Subject">已上传文件</FluentLabel>
                
            </FluentStack>
        </FluentCard>
    }
    </FluentStack>

@code {

    IBrowserFile? UploadFile { get; set; } = null;

    int? progressValue = 0;

    [Parameter]
    public EventCallback<IBrowserFile?> UploadedFileChanged { get; set; }

    [Parameter]
    public EventCallback PlaySetChanged { get; set; }

    [Parameter]
    [EditorRequired]
    public PlaylistSet PlaylistSet { get; set; } = default!;

    public FluentInputFile FileUploader = default!;

    async Task OnProgressChangeAsync(FluentInputFileEventArgs file)
    {
        await Task.CompletedTask;
    }

    private async Task OnFileUploaded(FluentInputFileEventArgs file)
    {
        progressValue = file.ProgressPercent;

        var localFile = Path.GetTempFileName() + file.Name;
        if(File.Exists(localFile))
        {
            File.Delete(localFile);
        }

        await using FileStream fs = new(localFile, FileMode.Create);
        await file.Stream!.CopyToAsync(fs);
        await file.Stream!.DisposeAsync();
    }

    private async Task OnCompleted(IEnumerable<FluentInputFileEventArgs> e)
    {
        try
        {
            if(!e.Any())
            {
                return;
            }

            using(var stream = e.First().Stream)
            {
                if (stream == null)
                    return;

                 PlayList playList = new PlayList();
                    await playList.ParseAsync(stream);
            }

        } catch (Exception ex)
        {

        }
        finally
        {
            await UploadedFileChanged.InvokeAsync(UploadFile);
            StateHasChanged();
        }
    }

    private async Task DeleteFile(IBrowserFile file)
    {
        UploadFile = null;
        PlaylistSet.playList = null;
        await UploadedFileChanged.InvokeAsync(UploadFile);
        StateHasChanged();
    }

    private void OnNameChanged(string Name)
    {
        PlaylistSet.Name = Name;
        PlaySetChanged.InvokeAsync();
    }

}

when execute to await file.Stream!.CopyToAsync(fs); it throw Exception like

Microsoft.AspNetCore.Components.WebAssembly.Server is 9.0.7
Microsoft.FluentUI.AspNetCore.Components is 4.12.1
Net Core is Net8.0

what mistake i make?and how to fix it.please help me.thanks.

[dvoituron]

Hello

This error is not included in FluentUI Blazor lib, but it comes from Microsoft.AspNetCore.Components.Server.

[Gloria-GK-406]

OK,thanks for your response.