[Blazor] How to get the pasted content from Blazor `onpaste` native event

[thangam105]

How to get the pasted content from Blazor onpaste native event.

I want to filter the copy and paste the Microsoft word document content into contenteditable DIV.

Please suggest for "How can I achieve it in blazor native approach?"

[javiercn]

You use the OnPaste event, but seems we are missing some data in the event definition.
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

https://github.com/aspnet/AspNetCore/blob/master/src/Components/Web/src/Web/EventHandlers.cs#L61

https://github.com/aspnet/AspNetCore/blob/master/src/Components/Web/src/Web/ClipboardEventArgs.cs

@SteveSandersonMS Is there a way to do this that I'm missing or is this something we should fix?

@thangam105 You can alternatively attach an event to your element through JS interop, pass in the data through js interop to the blazor application for filtering and then apply it.

[SteveSandersonMS]

For now, JS interop is the only reasonable way.

@javiercn I agree we are missing something here. But it will require some design to figure out how best to surface the data. For example, if the underlying JS APIs make it possible to access the pasted data in a streaming way, we'd want to do the same thing, in case people paste large amounts of data (e.g., many MB).

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

[thangavele]

I have tired the JSInterop for paste action within the editor, But I can't able to get the image file stream in blazor server-side (large data).

I want to upload and save the pasting images.

Can you please suggest to this?

[qcc-na]

First time I try to use blazor and I have to drop to interop. Disappointing.

[mugiwaraya]

How is this doable with JSInterop. Anyone got any examples?

[BeniaminMakal]

@mugiwaraya I found quite simple solution with JSInterop:

I've added a simple script to my index.html:

<script>
    window.customFunctions = {
        onPasteEvent: function (event) {
            var pasted = event.clipboardData.getData('Text');
            DotNet.invokeMethod('HerePasteYourAsseblyName', 'OnTextAreaPaste', pasted)
        }
    }
</script>

You need to pass to DotNet.invokeMethod arguments as follows: your assembly name, method name and arguments.

I've added a text area into my component:
<textarea onpaste="window.customFunctions.onPasteEvent(event)" placeholder="paste some text here"></textarea>
As you can see I'm calling a defined earlier function on onpaste event and passing there entire event object. In the function I'm extracting pasted data from it and send it to the last piece of this solution - to C# method:

@code {

    [JSInvokable]
    public static void OnTextAreaPaste(string text)
    {
        Console.WriteLine($"Pasted text: {text}");
    }
} 

This method is defined in my component. According to doc this method has to be static and have JSInvokable attribute. That's all. I hope it helps.

[thangavele]

Hi @BeniaminMakal

Can you please suggest how to get the pasted image(above 1MB size) in server-side while pasting inside contenteditable element?