Cropper.Blazor
Cropper.Blazor copied to clipboard
Replacing image results in non-functional cropper on first attempt and functional but duplicated cropper on second
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:
After first image upload:
After second image upload:
(Scrolled down to show the original "broken" cropper):
Recording: