Cropper.Blazor icon indicating copy to clipboard operation
Cropper.Blazor copied to clipboard

Replacing image results in non-functional cropper on first attempt and functional but duplicated cropper on second

Open NovaXeros opened this issue 8 months ago • 16 comments

Description: When attempting to replace an image using ReplaceAsync() functionality, the cropper component removes the previous image and displays the new one, but programmatic attempts to change aspect ratios are non-functional and the image size is incorrect.

If image replacement is attempted a second time, the previous incorrect cropper component is duplicated and pushed down the page and a new cropper component, with the correct image, size and functionality appears.

The original component remains on the page with the ability to move the selection square but non-functional otherwise.

All image replacements after this correctly replace the top-most cropper and all functionality on this cropper works, but the original erroneous cropper remains below.

Tech stack: .NET 8 Blazor Web App, in ServerInteractive render mode.

Replacement code:

    private async void UploadFiles(IBrowserFile file)
    {
        files.Clear();
        files.Add(file);

        if (file != null)
        {
            OldSrc = Src;
            string newSrc = await _cropperComponent!.GetImageUsingStreamingAsync(file, file.Size);

            if (IsErrorLoadImage)
            {
                IsAvailableInitCropper = true;
                IsErrorLoadImage = false;
            }
            else
            {
                IsAvailableInitCropper = false;
            }

            await Task.WhenAll(
                _cropperComponent!.ReplaceAsync(newSrc, false).AsTask()
            )
            .ContinueWith(x =>
            {
                Src = newSrc;
            });
        }
    }

Screenshots:

On the screenshots, the buttons below Upload Image are preset aspect ratios when clicked. These buttons are non functional on the first image replacement cropper, but work again after another replacement once the cropper is duplicated.

On initial load:

image

After first image upload:

image

After second image upload:

image

(Scrolled down to show the original "broken" cropper):

image

Recording: ezgif-3-441f9f7c1e

NovaXeros avatar Jun 06 '24 12:06 NovaXeros