GetImageDataAsync & GetImageDataUrlAsync on Save always throw an Object reference not set to an instance of an object error

[Karim Ainsworth]

Hi there, I have a very simple example, using Blazor Server, .NET8, latest version of the controls.  

Markup is this:

<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400px"></SfImageEditor>

<SfUploader CssClass="custom-uploader" ID="UploadFiles" AllowMultiple="false" AllowedExtensions=".png, .jpg, .jpeg, .pdf"><UploaderEvents ValueChange="OnChange" OnRemove="OnFileRemove"></UploaderEvents>

</SfUploader>

 <SfButton OnClick="@Save" IsPrimary="true" CssClass="mt-2 btn-submit">Next</SfButton>

Code As Follows:

public async Task OnChange(UploadChangeEventArgs args)

{

    var file = args.Files.FirstOrDefault();

    if (file is not null)

    {

        IsImgEditorHidden = false;

        using MemoryStream memoryStream = new MemoryStream();

        await using var fileStream = file.File.OpenReadStream(long.MaxValue);

        await fileStream.CopyToAsync(memoryStream);

        byte[] bytes = memoryStream.ToArray();

        base64Img = "data:image/png;base64," + Convert.ToBase64String(bytes);

        await ImageEditor.OpenAsync(base64Img);

        await ImageEditor.SelectAsync(AspectRatio);

        StateHasChanged();

    }

}

public async void Save()

{

    await ImageEditor.CropAsync();

    var url = await ImageEditor.GetImageDataUrlAsync();

    var imageData = await ImageEditor.GetImageDataAsync();

}

I can't get any data back from the ImageEditor at all, it hangs for a while then I get the Object Ref exception in my logs, no other info available.

Any idea what I am doing wrong here?

Many Thanks,

Karim

[Keerthikaran Venkatachalam]

Hi Karim,

We have checked the reported query, and in .NET 8, you need to set the MaximumReceiveMessageSize for SignalR in a Blazor Server application. Please refer to the below code snippet.

[Program.cs]

builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });

builder.Services.AddServerSideBlazor();

I have attached the video demonstration and sample for reference. Kindly update your Syncfusion packages to the latest version (25.1.35) and check it on your end.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: ImageEditorSample_b297b0e0.zip