0

I need help with a problem I'm having in a Blazor server-side app.

Specifically, I'm trying to obtain an image from the clipboard and use it as a MemoryStream.

I've looked around and even asked ChatGPT for help, but I'm not having any luck.

My application is developed using C# and .NET 7.0.

Here's what I'm attempting to achieve:

  1. Retrieve an image from the clipboard, which is already working.
  2. Paste the image into my Blazor application or transfer it by clicking a button.
  3. Use the MemoryStream in my app.

I think I need to use the IJSRuntime and incorporate some JavaScript into a <script></script> section of the _Host.cshtml file.

However, I'm encountering errors and not sure how to properly incorporate the JavaScript or inject the IJSRuntime.

Do any of you have any advice or can point me towards a tutorial that comprehensively covers all the necessary steps?

I've looked at some online resources, but they either seem incomplete or too complex for my level of proficiency.

What I did:

Added a Script in the _Host.cshtml file:

<script>
    window.getClipboardImage = async () => {
        const items = await navigator.clipboard.read();
        for (const item of items) {
            const blob = await item.getType('image/png');
            const reader = new FileReader();
            reader.readAsDataURL(blob);
            return new Promise((resolve, reject) => {
                reader.onloadend = () => {
                    resolve(reader.result);
                };
            });
        }
    };
</script>

then in the blazor compnent code behind file:

[Inject]
public IJSRuntime jSRuntime { get; set; }

and

[JSInvokable]
public async Task<string> GetClipboardImage()
{
    return await jSRuntime.InvokeAsync<string>("window.getClipboardImage");
}

and

private async Task HandlePasteEvent()
    {
        var image = await GetClipboardImage();
        var ImageSource = image;
        StateHasChanged();
    }

and in the razor file:

<img id="image" @onpaste="@HandlePasteEvent" />

When I run the application it opens to the page. I have an Image in my Clipbord, and the event fires and i go to the line:

return await jSRuntime.InvokeAsync<string>("window.getClipboardImage");

But here it failes with the following Error:

Error: Microsoft.JSInterop.JSException: Document is not focused. undefined at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at PVApp.Pages.KontaktCollection.Kontakt.GetClipboardImage() in H:\PANVolley\Programming\C#Software\Razor\PVApp\PVApp\Pages\KontaktCollection\Kontakt.razor.cs:line 76 at PVApp.Pages.KontaktCollection.Kontakt.HandlePasteEvent() in H:\PANVolley\Programming\C#Software\Razor\PVApp\PVApp\Pages\KontaktCollection\Kontakt.razor.cs:line 81 at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) l

And now I do not know what to do?

Peter Schwennesen
  • 1
  • 2
  • 1
    Please try to provide a [mre] to show what you've tried and point us to which part you're having problems with and which specific errors you're getting. It sounds like you already have some part working, so it's easier to help if we have something to build on. – Xerillio May 06 '23 at 11:31
  • It sounds suspiciously much like accessing the clipboard is one of those APIs that [require a user gesture](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0#javascript-api-restricted-to-user-gestures). Have you tried with a simpler JavaScript function that just returns some hard-coded string? – Xerillio May 09 '23 at 17:02
  • It also seems reading the clipboard [requires focus on the page](https://stackoverflow.com/q/56306153/3034273). What if you use a button onclick event instead of img onpaste? – Xerillio May 09 '23 at 17:05

0 Answers0