Blazor 拖/放不尊重 PreventDefault 并下载文件

Question

考虑以下 Blazor 标记：

<div class="drag-drop-area @this.Conditional(isDragging, "drag-over")"

     @ondragenter="OnDragEnter"
     @ondragenter:preventDefault

     @ondragleave="OnDragLeave"
     @ondragleave:preventDefault

     @ondrop="OnDrop"
     @ondrop:preventDefault>

    <div class="h3 text-secondary">
        <i class="fa-solid fa-download"></i>
        <p>Drop a file here</p>
    </div>
</div>

private bool isDragging = false;

private void OnDragEnter(DragEventArgs e)
{
    isDragging = true;
    StateHasChanged();
}

private void OnDragLeave(DragEventArgs e)
{
    isDragging = false;
    StateHasChanged();
}


private void OnDrop(DragEventArgs e)
{
    isDragging = false;
    StateHasChanged();
}

这些事件受到尊重，因为当鼠标进入或离开

drag-drop-area

时，我可以看到样式发生变化，但

preventDefault

不受尊重。具体来说，我想将 CSV 文件放入该区域并访问其数据（这是下一个挑战），但所做的只是将 CSV 文件下载到我的

~/user/Downloads

目录中。

有什么想法可以解决这个问题吗？

注意：我使用的是 C# 12、.NET 8 和 Interactive Server 渲染。

Answer 1

您可以尝试实现

ondragover

事件并将 PreventDefault 设置为 true，如下所示：

<div class="drag-drop-areä"
     @ondrop="OnDrop"
     @ondrop:preventDefault="true"
     @ondragover="OnOver"
     @ondragover:preventDefault="true">

    <div class="h3 text-secondary">
        <i class="fa-solid fa-download"></i>
        <p>Drop a file here</p>
    </div>
</div>

@code{
    private bool isDragging = false;


    private void OnDrop(DragEventArgs e)
    {
        var files = e.DataTransfer.Files;
        isDragging = false;
        StateHasChanged();
    }
    private void OnOver(DragEventArgs e)
    {
    }
}

触发测试OnDrop获取文件数据