UploadFileModalDialog.razor

<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configuration</h5>
                <button type="button" class="btn-close" @onclick="Abort"></button>
            </div>
            <div class="modal-body">
                <EditForm Model="@model" OnValidSubmit="Ok">
                    <DataAnnotationsValidator />
                    <div class="form-floating mb-3">
	                    <InputText type="text" class="form-control" id="name" placeholder="Filename"
	                               @bind-Value="model.Name"/>
	                    <label for="name">The filename of the media file. On services like Azure, this can include the directory path.</label>
	                    <ValidationMessage For="() => model.Name"></ValidationMessage>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <InputCheckbox class="form-check-input" id="cache" @bind-Value="model.CacheMedia" />
                        <label class="form-check-label" for="cache">Enable Media Caching</label><br />
                        <small class="form-text text-body-secondary">
	                        If enabled, the "Cache-Control" header will be set automatically.<br/>
	                        The value is set to one week. If disabled, no header will be set.
                        </small>
                    </div>
                </EditForm>
            </div>
            <div class="modal-footer">
                <button id="abort" type="button" class="btn btn-secondary" @onclick="Abort">Abort</button>
                <button type="button" class="btn btn-primary" @onclick="Ok">OK</button>
            </div>
        </div>
    </div>
</div>

@if (showBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}

@code {
    private TaskCompletionSource<UploadFileModalDialogObject?> result = null!;
    private string modalDisplay = "none;";
    private string modalClass = "";
    private bool showBackdrop;
    private readonly UploadFileModalDialogObject model = new();

    public async Task<UploadFileModalDialogObject?> ShowAsync(string fileName)
    {
        modalDisplay = "block;";
        modalClass = "show";
        showBackdrop = true;
        model.Name = fileName;
        result = new TaskCompletionSource<UploadFileModalDialogObject?>();
        StateHasChanged();
        return await result.Task;
    }

    private void Abort()
    {
        modalDisplay = "none";
        modalClass = string.Empty;
        showBackdrop = false;
        result.SetResult(null);
        StateHasChanged();
    }

    private void Ok()
    {
        modalDisplay = "none";
        modalClass = string.Empty;
        showBackdrop = false;
        result.SetResult(model);
        StateHasChanged();
    }
}