A new Blazor feature for ASP.NET Core 6 is custom events. With them, we can add custom logic to browser events.

In this post we are going to implement a “multimedia paste”. What we will do is allow users to paste both text and images into a textarea. For that we will use a custom event.

For this example I will use ASP.NET Core 6 and a Blazor WASM app.

We need to configure the new event in two places, in JavaScript and in Blazor. Let’s start with JavaScript.

JavaScript

In JavaScript we indicate the browser event to use (paste in our case, which serves to respond to the operation of pasting something). We then perform custom logic in JavaScript, finally allowing the event to be raised in Blazor (that is, a C# method is executed).

Create a JavaScript file in the wwwroot (I called it customEvent.js) and write the following:

Blazor.registerCustomEventType("pastemultimedia", {
    browserEventName: 'paste',
    createEventArgs: event => {
        let isMultimedia = false;
        
        // We get the saved text in the clipboard
        let data = event.clipboardData.getData('text');

        const items = event.clipboardData.items;

        // With this we'll filter the file by its media type
        const acceptedMediaTypes = ['image/png'];

        for (let i = 0; i < items.length; i++) {
            const file = items[i].getAsFile();

            // We verify there's a file in the current item
            if (!file) {
                continue;
            }

            // We verify the media type of the file
            if (acceptedMediaTypes.indexOf(items[i].type) === -1) {
                continue;
            }

            // it's an image
            isMultimedia = true;
            const url = window.URL || window.webkitURL;
            data = url.createObjectURL(file);
        }

        // We are passing the information to the custom event from JavaScript
        return {
            isMultimedia,
            data
        }
    }
})

As you can see, the custom event is pastemultimedia, and the browser event we will use is paste. The idea is that, after making a paste, the function that we have placed in createEventArgs will be executed.

In createEventArgs we build the data that we are going to send to the event in Blazor. These data are: isMultimedia and data:

• isMultimedia: It will be a bool that tells us if what the user has pasted is multimedia or not. That is, if it is an image or text.
• data: It refers to the information itself that the user has pasted, either the text or an image.

Then, we return this data to send it to Blazor.

Reference the JavaScript file in the index.html file, below the blazor script:

<script src="_framework/blazor.webassembly.js"></script>
<script src="customEvent.js"></script>

Blazor

Now, we have to register the custom event at the Blazor level. For that we have to create two classes, one to define the event parameters, and another to define the event itself. Let’s start with the parameters.

Create the following class:

public class PasteMultimediaEventsArgs: EventArgs
{
    public bool IsMultimedia { get; set; }
    public string Data { get; set; }
}

As you can see, the parameters are IsMultimedia and Data, which are the same data that we defined in our JavaScript code.

Now, let’s declare the onpastemultimedia event:

[EventHandler("onpastemultimedia", typeof(PasteMultimediaEventsArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{

}

As you can see, the name of the event in Blazor is onpastemultimedia, and its parameters are the ones we define in PasteMultimediaEventsArgs.

We are now ready to use our custom event.

Using the New Event

In a component, we can put the following:

<div>
	<textarea @onpastemultimedia="HandlePasteMultimedia" />
</div>

@foreach (var image in images)
{
	<img style="width: 150px; margin-right: 1rem; margin-top: 1rem" src="@image" />
}

@code {

	private List<string> images = new List<string>();

	private void HandlePasteMultimedia(PasteMultimediaEventsArgs e)
	{
		Console.WriteLine("e.Multimedia " + e.IsMultimedia);
		Console.WriteLine("e.Data " + e.Data);

		if (e.IsMultimedia)
		{
			images.Add(e.Data);
		}
	}
}

Here we can see that in the textarea we are using the onpastemultimedia event. And, because of this event, we invoke the HandlePasteMultimedia method.

In the HandlePasteMultimedia we receive the PasteMultimediaEventsArgs as a parameter. In this parameter we receive the IsMultimedia and Data.

Then, if IsMultimedia is true, then we add the URL of the image to the list of images defined above.

This is the result:

Courses

If you want to learn more about Blazor, or another .NET technology, get one of my Udemy courses today (the following links include a discount coupon):

1. Building Applications with React 17 and ASP.NET Core 6: https://www.udemy.com/course/building-applications-with-react-and-aspnet-core/?couponCode=SEPTEMBER2021
2. Building Applications with Angular 11 and ASP.NET Core 5: https://www.udemy.com/course/building-applications-with-angular-and-aspnet-core/?couponCode=SEPTEMBER2021
3. Programming in Blazor – ASP.NET Core 5: https://www.udemy.com/course/programming-in-blazor-aspnet-core/?couponCode=SEPTEMBER2021
4. Building RESTful Web APIs with ASP.NET Core 3.1: https://www.udemy.com/course/building-restful-web-apis-with-aspnet-core/?couponCode=SEPTEMBER2021
5. Introduction to Concurrency in C# – Async and Paralellism: https://www.udemy.com/course/introduction-to-concurrency-in-c-async-and-paralellism/?couponCode=SEPTEMBER2021

Kind regards!