Using Javascript interop to use the Cloudinary widget in Blazor

We're happy to announce the release of a GitHub repo demonstrating Cloudinary interop with Blazor Server. While this solution might also work with Blazor WebAssembly, our current focus is on the server side, so we haven't tested it. YMMV.

How it Works

We create two methods in a Javascript file - setupBarberUploadWidget which configures the widget the way we want it, and openWidget which opens the widget.

In setupBarberUploadWidget we pass in a couple of parameters, most notably of which is a DotNetObjectReference we use for invoking a method in our Blazor page in the widget event. We also pass in the name of the method so we can invoke it.

Our Upload Widget event now looks like this:

        },(error,result) => {
                if (!error && result.event === 'success'){
                    instance.invokeMethodAsync(callback,JSON.stringify(result));
                }

We invoke the method and pass in a stringified version of the data from the widget so our callback serializes it to a SuccessEvent object which we can then do a number of things - in this demo, we simply take the info and build an image tag which we put into a MarkupString so we can display the image on our page.

The README has details for configuring the dotnet secrets to getting it running.

Enjoy!

Don't let the technical debt of your legacy Windows applications kill your business. Contact us and let us show you how you can reduce expensive dependencies and save costs while modernizing your app!