Blazor - ondrop event doesn't return file object

Question

I have bind @ondrop event into my div element, while drag and drop local image into div, DragEventArgs doesn't return file object details.

Razor code

<div @ondrop="@OnDrop"></div>

@code{
    internal void OnDrop(DragEventArgs args)
    {
        var files = args.DataTransfer.Files;
    }
}

output:

Anyone have solution for this case?

Note: My main goal is to convert it as FileStream or MemoryStream then save it into specified location

You can't without Javascript. If you look at Blazor source code no code handle DataTansfer. See here github.com/dotnet/aspnetcore/issues/5532 — Remi THOMAS

Henk Holterman Henk Holterman · Accepted Answer · 2020-09-07T14:20:02

You should use preventDefault here:

<div @ondrop:preventDefault="@OnDrop"></div>

and maybe you still have to handle Dragover as well, I'm not sure.

Blazor - ondrop event doesn't return file object

1 Answers