Cropper: behavior on invalid Source

Source/Extensions/Blazorise.Cropper/Cropper.razor.cs

@@ -260,6 +260,12 @@ internal async Task NotifyImageReady()
         if ( ImageReady is not null )
             await ImageReady.Invoke();
     }
+
+    internal async Task NotifyImageLoadingFailed( string errorMessage )
+    {
+        if ( ImageLoadingFailed is not null )
+            await ImageLoadingFailed.Invoke(errorMessage);
+    }
 
     #endregion
 
@@ -278,7 +284,7 @@ internal async Task NotifyImageReady()
     /// <summary>
     /// The original image source.
     /// </summary>
-    [Parameter] public string Source { get; set; }
+    [Parameter, EditorRequired] public string Source { get; set; }
 
     /// <summary>
     /// The alt text of the image.
@@ -324,6 +330,12 @@ internal async Task NotifyImageReady()
     /// This event fires when the image is ready / loaded.
     /// </summary>
     [Parameter] public Func<Task> ImageReady { get; set; }
+
+    /// <summary>
+    /// This event fires when the image cannot be loaded. Usually because of 404 or <see cref="Source"/> being null.
+    /// Error message inside the string parameter.
+    /// </summary>
+    [Parameter] public Func<string,Task> ImageLoadingFailed { get; set; }
 
     /// <summary>
     /// Indicates whether this element is disabled.

Source/Extensions/Blazorise.Cropper/CropperAdapter.cs

@@ -32,4 +32,7 @@ public CropperAdapter( Cropper cropper )
 
     [JSInvokable( "ImageReady" )]
     public async ValueTask ImageReady() => await cropper.NotifyImageReady();
+
+    [JSInvokable( nameof(ImageLoadingFailed) )]
+    public async ValueTask ImageLoadingFailed(string errorMessage) => await cropper.NotifyImageLoadingFailed(errorMessage);
 }

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");
-    });
+    cropperImageReady(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");
-                });
+                cropperImageReady(cropperImage, cropperCanvas, instance);
             }
 
             if (options.alt.changed) {
@@ -298,6 +294,26 @@ export function resetSelection(element, elementId) {
     }
 }
 
+let disabledBeforeImageLoadFailed;
+let wasDisabled;
+function cropperImageReady(cropperImage, cropperCanvas, instance) {
+    cropperImage.$ready((image) => {
+        if(wasDisabled)
+        {
+            cropperCanvas.disabled = disabledBeforeImageLoadFailed;
+            wasDisabled =false;
+        }
+        invokeDotNetMethodAsync(instance.adapter, "ImageReady");
+    })
+        .catch((err) => {
+            invokeDotNetMethodAsync(instance.adapter, "ImageLoadingFailed", err.message);
+            disabledBeforeImageLoadFailed = cropperCanvas.disabled;
+            wasDisabled = true;
+            cropperCanvas.disabled = true;
+        });
+}
+
+
 function onCropperStartHandler(event) {
     let parentElementId = event.srcElement.parentElement.id;