Closeable Chip on Mudblazor fileupload

Question

How can I create a closeable chip on Mudblazor Fileupload Drag&Drop? Here is an example: https://try.mudblazor.com/snippet/GYwHEQvURJEkHBcX

@inject ISnackbar Snackbar

<MudStack Style="width: 100%">
    <MudFileUpload T="IReadOnlyList<IBrowserFile>" OnFilesChanged="OnInputFileChanged" Hidden="false" Class="flex-1" InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20" InputStyle="opacity:0"
                   @ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass">
        <ButtonTemplate>
            <MudPaper Height="300px" Outlined="true" Class="@DragClass">
                <MudText Typo="Typo.h6">Drag and drop files here or click</MudText>
                @foreach (var file in fileNames)
                {
                    <MudChip Color="Color.Dark" Text="@file" OnClose="Closed" />
                }
            </MudPaper>
        </ButtonTemplate>
    </MudFileUpload>
    <MudToolBar DisableGutters="true" Class="gap-4">
        <MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
        <MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
    </MudToolBar>
</MudStack>
@code {
    private static string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full z-10";
    private string DragClass = DefaultDragClass;
    private List<string> fileNames = new List<string>();

    private void OnInputFileChanged(InputFileChangeEventArgs e)
    {
        ClearDragClass();
        var files = e.GetMultipleFiles();
        foreach (var file in files)
        {
            fileNames.Add(file.Name);
        }
    }

    void Closed(MudChip chip) {
        fileNames.Remove(chip.Text);
    }

    private async Task Clear()
    {
        fileNames.Clear();
        ClearDragClass();
        await Task.Delay(100);
    }
    private void Upload()
    {
        //Upload the files here
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
        Snackbar.Add("TODO: Upload your files!", Severity.Normal);
    }

    private void SetDragClass()
    {
        DragClass = $"{DefaultDragClass} mud-border-primary";
    }

    private void ClearDragClass()
    {
        DragClass = DefaultDragClass;
    }
}

The chip is not clickable and if I change the Z-Index of the MudFileUpload control it collapses. I also tried to add Z-Index above 20 to the chip but I still cannot click it.

Answer 1

The X button is not clickable, you have to put The "MudChip" outside the MudFileUpload tag like this :

<MudStack Style="width: 100%">
    <MudFileUpload T="IReadOnlyList<IBrowserFile>" OnFilesChanged="OnInputFileChanged" Hidden="false" Class="flex-1" InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20" InputStyle="opacity:0"
                   @ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass">
        <ButtonTemplate>
            <MudPaper Height="300px" Outlined="true" Class="@DragClass">
                <MudText Typo="Typo.h6">Drag and drop files here or click</MudText>
            </MudPaper>
        </ButtonTemplate>
    </MudFileUpload>
    @foreach (var file in fileNames)
    {
        <MudChip Color="Color.Dark" Text="@file" OnClose="Closed" />
    }
    <MudToolBar DisableGutters="true" Class="gap-4">
        <MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
        <MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
    </MudToolBar>
</MudStack>