Does the Cropper component support dynamic modification of the Source property?

[ZeroFantom]

Hello, I didn't find any mention in the documentation, but I checked all possible options why this might not work.
Unfortunately, I could not find an explanation for this problem, the problem itself is that Cropper apparently does not support dynamically changing the Source property, do I understand correctly?
For all possible implementations, I get an error:

System.AggregateException: One or more errors occurred. (Object reference not set to an instance of an object.)
---> System.NullReferenceException: Object reference not set to an instance of an object.
at Blazorise.Cropper.Cropper.<>c__DisplayClass1_0.<b__0>d.MoveNext()
--- End of stack trace from previous location ---
at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
at Blazorise.Cropper.Cropper.OnAfterRenderAsync(Boolean firstRender)
--- End of inner exception stack trace ---

There is nothing special in my code, I just change the path to the image file after uploading it via FileEdit.
You can just dynamically try to change the path to the file using the binding, and then call State Has Changed and intercept this error in the logs.

One of the variants of my code when I observe this error

Frontend razor component

It is called by pressing the button:

<Modal @bind-Visible="@ModalVisible" Style="--bs-modal-width: 80rem;">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Изменение аватара с просмотром миниатюры</ModalTitle>
            <CloseButton/>
        </ModalHeader>
        <ModalBody>
            <Fields>
                <Field class="modal-content-col">
                    <FieldLabel>
                        <Text class="sub-text-title-profile">Основное изображение</Text>
                    </FieldLabel>
                    <FieldBody>
                        <Cropper @ref="@CropperProfile" Source="@ServiceAuthorize.Client.UserInfoNavigation.PathAvatar" CropperState="@CropperState" Style="width: 30rem; height: 30rem;" />
                        <Buttons>
                            <Button Color="Color.Dark" Clicked="@ResetSelection">Убрать выделение</Button>
                            <Button Color="Color.Dark" Clicked="@Center">Выровнять по центру</Button>
                        </Buttons>
                    </FieldBody>
                </Field>
                <Field class="modal-content-col">
                    <FieldLabel>
                        <Text class="sub-text-title-profile">Предпросмотр</Text>
                    </FieldLabel>
                    <FieldBody>
                        <CropperViewer CropperState="@CropperState" Margin="Margin.Is2.FromBottom" Style="width: 20rem; height: 20rem;"/>
                        <CropperViewer CropperState="@CropperState" Margin="Margin.Is2.FromBottom" Style="width: 10rem; height: 10rem;"/>
                        <CropperViewer CropperState="@CropperState" Margin="Margin.Is2.FromBottom" Style="width: 5rem; height: 5rem;"/>
                    </FieldBody>
                </Field>
            </Fields>
        </ModalBody>
        <ModalFooter>
            <Field>
                <FileEdit Changed="@OnChanged" Progressed="@OnProgressed" Filter=".jpeg, .jpg, .png"/>
            </Field>
            <Field>
                <Button Color="Color.Secondary" Clicked="@HideModal">Закрыть</Button>
            </Field>
        </ModalFooter>
    </ModalContent>
</Modal>

Backend razor component code:

 protected async Task OnChanged(FileChangedEventArgs e)
    {
        try
        {
            var file = e.Files.FirstOrDefault();
            if (file != null)
            {
               // Here I just change the Source via the variable ServiceAuthorize.Client.UserInfoNavigation.PathAvatar.
               // ServiceAuthorize.Client.UserInfoNavigation.PathAvatar = "url_photo"
            }
        }
        finally
        {
            await InvokeAsync(StateHasChanged);
        }
    }
    
    protected async Task OnProgressed( FileProgressedEventArgs e )
    {
        ProgressUpload = $"Файл: {e.File.Name} Загрузка: {e.Percentage}";
        if (e.Percentage == 100)
        {
            ProgressUpload = null;
        }
        await InvokeAsync(StateHasChanged);
    }

    protected Cropper CropperProfile { get; set; }
    protected CropperState CropperState { get; set; } = new();
    protected bool ModalVisible { get; set; }
    
    protected async Task OnPreviewImage()
    {
        ModalVisible = true;
        await InvokeAsync(StateHasChanged);
    }
    
    protected void HideModal()
        => ModalVisible = false;
    
    protected async Task ResetSelection()
        => await CropperProfile.ResetSelection();
    
    protected async Task Center()
        => await CropperProfile.Center("cover");

[stsrki]

This should work. We do have update logic for the Source parameter. Can you open a new issue with the code to reproduce it?

[ZeroFantom]

I have updated the discussion.
This error does not occur with the Image, everything is updated without problems, while Cropper has this problem.
I can confirm this, because I can clearly see the changes in real time.

[DomenicoFormoso]

Hi, it doesn't work for me too, I intercept the file from InputFile

<InputFile OnChange="@CaricaFile" Filter=".png">Carica</InputFile>
<Cropper Source="@FileImmagine" SelectionChanged="@OnSelectionChanged" Style="aspect-ratio: 16 / 9; height: 100%;" />

 [Parameter] public string? FileImmagine { get; set; }

onchange here, I convert to a local image string

private async Task CaricaFile(InputFileChangeEventArgs inputFileChangeEventArgs)
{
    var image = await inputFileChangeEventArgs.File.RequestImageFileAsync("image/png", 600, 600);
    using Stream imageStream = image.OpenReadStream(1024 * 1024 * 10);
    using MemoryStream ms = new();
    await imageStream.CopyToAsync(ms);
    FileImmagine = $"data:image/png;base64,{Convert.ToBase64String(ms.ToArray())}";
    StateHasChanged();
}

This gives me error in Cropper

[stsrki]

I will try and look what might be wrong.

[DomenicoFormoso]

I updated to version 1.43 and changed the code and it works fine.

<FileEdit Changed="@CaricaFile" Filter=".jpeg, .jpg, .png">Carica</FileEdit>

<Cropper 
@ref="@cropper" 
Source="@FileCropper" 
SelectionOptions="@(new CropperSelectionOptions { AspectRatio = CropperAspectRatio.IsFree})" SelectionChanged="@OnSelectionChanged" 
Style="@styleCropper" />

private string styleCropper = "height:1000px;width:1000px";


private async Task CaricaFile(FileChangedEventArgs e)
{
    try
    {
        byte[] bytes;
        using (MemoryStream result = new MemoryStream())
        {
            await e.Files.First().OpenReadStream(long.MaxValue).CopyToAsync(result);
            bytes = result.ToArray();
        }
        FileImmagine = $"data:{e.Files.First().Type};base64, {Convert.ToBase64String(bytes)}";
        FileCropper = FileImmagine;
    }
    finally
    {
        await InvokeAsync(StateHasChanged);
    }
}

[stsrki]

Thanks for sharing.

[ZeroFantom]

Thanks for sharing! I'll also look at it later, but for now I'm closing the discussion.