File drop zone

[jpacreb]

I'm trying to implement a drag n drop zone for the FileEdit component so that the user can:

• drag and drop a file
• paste from clipboard

I cannot work out how to integrate the FileEdit component with JS to handle the drop and paste events.
Does someone have a working example of this?

[stsrki]

I didn't try it. But you can maybe assign the ID to the FileEdit component and then call the custom JavaScript code by using that ID to handle drag-and-drop and trigger the onchange event. Example here https://www.meziantou.net/upload-files-with-drag-drop-or-paste-from-clipboard-in-blazor.htm

To assign the ID

<FileEdit ElementId="my-file-upload" />

[jpacreb]

Thanks for the quick reply. I will try that and see how it goes.

[jpacreb]

The code from https://www.meziantou.net/upload-files-with-drag-drop-or-paste-from-clipboard-in-blazor.htm didn't quite work - it doesn't compile as there is a bug. However, the post contains a link to an example project that does work :). https://www.meziantou.net/assets/blazorfileuploaddotnet5.zip?v=27df

Based on that, my initial test of simply replacing the standard <InputFile> with Blazorise <FileEdit> ...

<div @ref="_dropZoneElement" class="drop-zone">
    <p>Drop a file or paste an image from the clipboard or select a file using the input</p>
    <div @ref="_inputFileContainer">
        <FileEdit Changed="@OnChanges" />
    </div>
</div>

and refactoring the OnChanges method to use the FileChangedEventArgs ...

public async Task OnChanges(FileChangedEventArgs e)
    {
        var file = e.Files.FirstOrDefault();
        if (file == null)
            return;
        await using var stream = file.OpenReadStream();
        await using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        src = "data:" + file.Type + ";base64," + Convert.ToBase64String(ms.ToArray());
    }

... works exactly as expected. I can build what I need from that.

Thanks for pointing me in the right direction!

[stsrki]

Great. And thank you for taking time to post the working code :)