diff --git a/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js b/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js index 6f084351de..4853075036 100644 --- a/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js +++ b/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js @@ -56,9 +56,7 @@ export function initialize(dotNetAdapter, element, elementId, options) { const cropperSelection = cropper.getCropperSelection(); const cropperImage = cropper.getCropperImage(); - cropperImage.$ready((image) => { - invokeDotNetMethodAsync(dotNetAdapter, "ImageReady"); - }); + manageCropperImageReady(cropperImage, cropperCanvas, instance); registerEvents(cropperCanvas, cropperSelection); @@ -106,9 +104,7 @@ export function updateOptions(element, elementId, options) { cropperImage.src = options.source.value; // Callback needs to be setup again after each source changed. - cropperImage.$ready((image) => { - invokeDotNetMethodAsync(instance.adapter, "ImageReady"); - }); + manageCropperImageReady(cropperImage, cropperCanvas, instance); } if (options.alt.changed) { @@ -298,6 +294,22 @@ export function resetSelection(element, elementId) { } } +function manageCropperImageReady(cropperImage, cropperCanvas, instance) { + cropperImage.$ready((image) => { + if (instance.loadFailed) { + cropperCanvas.disabled = instance.disabledBeforeImageLoadFailed; + instance.loadFailed = false; + } + invokeDotNetMethodAsync(instance.adapter, "ImageReady"); + }) + .catch(() => { + instance.disabledBeforeImageLoadFailed = cropperCanvas.disabled; + instance.loadFailed = true; + cropperCanvas.disabled = true; + }); +} + + function onCropperStartHandler(event) { let parentElementId = event.srcElement.parentElement.id;