Cropper: behavior on invalid Source (#5916)

* Disables image cropper when source is not valid. New event ImageLoadingFailed. * instance properties in blazorise.cropper.js. Revert the api additions (ImageLoadingFailed) * renames --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Dec 30, 2024 · d7b8f02 · d7b8f02
1 parent aff8589
commit d7b8f02
Showing 1 changed file with 18 additions and 6 deletions.
diff --git 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;