Blazor - Drag and Drop uploads file

Question

I'm facing an issue with uploading a file via the Drag'n Drop API. Here the following blazor component:

 <InputTextArea
        @ondrop="HandleDrop"
        @ondragenter="HandleDragEnter"
        @ondragleave="HandleDragLeave"/>
 </InputTextArea>

@code {
    private async Task HandleDrop(DragEventArgs args)
    {
        var files = args.DataTransfer.Files;
        // Do something to upload the file and get the content
    }

I want to upload the file and display it in the textarea. Now since .NET6 the DragEventArgs will list all files (if any) associated with the Drag'n Drop event. Natively there seems to be no way to get the content of those files.

Therefore I tried to achieve this with JavaScript interop:

private async Task HandleDrop(DragEventArgs args)
{
    var content = await jsRuntime.InvokeAsync<string>("getContentFromFile", args);
}

With the following JavaScript function (which is referenced in the _Layout.cshtml):

async function getContentFromFile(args) {
    // Use some API here? File Upload API? Didn't work as args is only a data object and not the "real" DragEventArgs from JavaScript

    // I also tried FileReader
    const fileName = args.Files[0]; // Let's assume we always have one file
    let content = await new Promise((resolve) => {
        let fileReader = new FileReader();
        fileReader.onload = (e) => resolve(fileReader.result);
        fileReader.readAsText(fileName);
    });

    console.log(content);
    return content;

}

This approach let to other issues and exceptions, like that the FileReader threw:

parameter is not of type 'Blob'

Is this with this approach with the current version of blazor (.net6) possible at all? Any tips are welcome.

Is it not something you'd do in the OnChange of an InputFile? — Caius Jard
– Caius Jard, Commented Jan 5, 2022 at 18:15
Just did a quick test, chucked <InputFile OnChange="@LoadFilesAsync" multiple/> into the razor and a private async Task LoadFilesAsync(InputFileChangeEventArgs e) { foreach (var file in e.GetMultipleFiles(5)){ Stream stream = file.OpenReadStream(2048000); in the code, it started uploading when i dropped a file on the "Choose files" button (the only visible part of the inputfile).. — Caius Jard
– Caius Jard, Commented Jan 5, 2022 at 18:21
Yes it works with InputFile. I want to have this explicitly on a textarea, if this is possible. — Link
– Link, Commented Jan 5, 2022 at 20:13

Aaron · Accepted Answer · 2025-11-22 03:41:40Z

I am using .Net 10 Blazor WASM and had issues with the <InputFile /> not working for drag and drop. I finally realised that putting it into a <div> container and sizing the <div> container was incorrect, as it was the <div> that was getting the events and not the <InputFile>. So I removed the div container and just had the <InputFile> with a class to size it big enough to drop the file onto.

Razor code

    <InputFile class="drag-drop-area" OnChange="HandleFileSelection">
        <p>Drag and drop files here, or click to select.</p>
    </InputFile>


@code {

    private async Task HandleFileSelection(InputFileChangeEventArgs e)
    {
        await LoadFileContent(e.File);
    }
}

CSS

.drag-drop-area {
    cursor: pointer;
    display: block;
    width: 800px;
    height: 400px;
    border: 1px dashed black;
    position: relative; /* Essential for positioning the InputFile inside */
}

Collectives™ on Stack Overflow

Blazor - Drag and Drop uploads file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related