DragDrop Component

[ricardo-valero]

Hi, I was inspired by Steve Sanderson's InputFile samples and I was thinking about making the drag and drop viewer component with a MudBlazor style.

I couldn't go to far with the DragEventArgs since some features are currently missing and planned for the next release: dotnet/aspnetcore#18754.
If someone wishes to add them using javascript I'd check out the MDN HTML Drag and Drop API.

Something similar to the code below is what I currently use, but I was thinking of adding a bit more visual cues like changing the color when files are dragged over. DataTransfer is not yet supported so you'll see in the console 0 items or files:

<style>
    .drag-drop-custom-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem;
    }

    .drag-drop-zone {
        position: relative;
        cursor: pointer;
    }

        .drag-drop-zone input[type=file] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
</style>

<MudButton HtmlTag="div"
           Class="drag-drop-zone drag-drop-custom-button"
           Variant="Variant.Filled"
           Color="@(IsDragActive ? Color.Dark : Color.Primary)"
           StartIcon="@Filled.CloudUpload">
    Upload Files
    <InputFile OnChange="@OnInputFileChange"
               @ondragenter="OnDragEnter"
               @ondragleave="OnDragLeave"
               @ondrop="OnDrop"
               multiple />
</MudButton>

@code {
    [Parameter] public EventCallback<InputFileChangeEventArgs> OnInputFileChange { get; set; }
    private bool IsDragActive { get; set; }

    public void OnDragEnter(DragEventArgs args)
    {
        IsDragActive = true;
        var filesLength = args.DataTransfer.Files.Length;
        var itemsLength = args.DataTransfer.Items.Length;
        Console.WriteLine($"OnDragEnter: {filesLength} {itemsLength}");
    }

    public void OnDragLeave(DragEventArgs args)
    {
        IsDragActive = false;
        Console.WriteLine("OnDragLeave");
    }

    public void OnDrop(DragEventArgs args)
    {
        IsDragActive = false;
        var filesLength = args.DataTransfer.Files.Length;
        var itemsLength = args.DataTransfer.Items.Length;
        Console.WriteLine($"OnDrop: {filesLength} {itemsLength}");
    }
}

My goal is to inspire someone to make a more reusable and easier to customize component and maybe then add the example to https://mudblazor.com/components/fileupload.

[porkopek]

Hi!
That's great.
We also have an example for the next release of a drag and drop file uploader.
You can check it out here
https://github.com/Garderoben/MudBlazor/blob/develop/src/MudBlazor.Docs/Pages/Components/FileUpload/Examples/DragAndDropFileUploadExample.razor

Maybe yours could be added as an alternative example. Or maybe you want to encapsulate this for a future MudFileUploader component