Cannot pass image Base64 string from JavaScript to C# in Blazor server app

In my Blazor server side app I'm trying to pass an image Base64 string (after resizing) from JavaScript to C#. In JavaScript the code is in the FileReader.onload func, so it won't return anything.
Therefore I'm trying to assign the data to an HTML textarea element from JS, and then pick it up from binded to it variable in C#, but this doesn't work - I'm getting empty string, although I'm pretty sure the textarea element has a correct value.

HTML:
<textarea id="base64ImageTextArea" @bind="base64Image" hidden />

JS:

function ResizeImage(){
        ...
        reader.onload = function (event) {
            ...
            document.getElementById("base64ImageTextArea").value = base64String;
            ...
        }
        ...
}

function GetImageBase64String() {
    return document.getElementById("base64ImageTextArea").value;
}

C#:

private string base64Image;

private async Task OnInputFileChange()
{
    await JSRuntime.InvokeVoidAsync("ResizeImage");
    base64Image = await JSRuntime.InvokeAsync<string>("GetImageBase64String"); // base64Image == ""
}

I've also added the following to Startap.cs:

services.AddServerSideBlazor()
            .AddHubOptions(x => x.MaximumReceiveMessageSize = 102400000);

Note: I don't wanna upload the image to the server from JS on this step as I need to do some more manipulations on it in C#.

Any ideas?



Read more here: https://stackoverflow.com/questions/66272313/cannot-pass-image-base64-string-from-javascript-to-c-sharp-in-blazor-server-app

Content Attribution

This content was originally published by Daulet Kshibekov at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: