Cropper: image loading failed event (#5937)

* ImageLoadingFailed api change * js edit for calling dotnet when image loading fails * Release notes and comments * Formating * Strongly typed name --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Feb 11, 2025 · 6f8ec2f · 6f8ec2f
1 parent 209f9fe
commit 6f8ec2f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/Documentation/Blazorise.Docs/Pages/News/2025-03-10-release-notes-180.razor b/Documentation/Blazorise.Docs/Pages/News/2025-03-10-release-notes-180.razor
@@ -5,7 +5,7 @@
 <NewsPageImage Source="img/news/180/v180.png" Text="Blazorise v1.8" />
 
 <NewsPageTitle>
-    Announcing Blazorise 1.8 - 
+    Announcing Blazorise 1.8 -
 </NewsPageTitle>
 
 <Paragraph>
@@ -23,7 +23,7 @@
 <UnorderedList>
     <UnorderedListItem>
         <Paragraph>
-            <Strong></Strong>: 
+            <Strong></Strong>:
         </Paragraph>
     </UnorderedListItem>
     <UnorderedListItem>
@@ -70,4 +70,12 @@
     <Code>RouterTabs</Code> now supports localization, allowing dynamic tab titles based on the current culture. Titles can be set via resource files or other localization strategies, ensuring consistency with the app’s language settings.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is3">
+    Cropper Component Enhancements
+</Heading>
+
+<Paragraph>
+    The <Code>Cropper</Code> component has been enhanced with the <Code>ImageLoadingFailed</Code> event, which triggers when an image fails to load. This event provides a way to handle errors and display a custom message or image in place of the failed image.
+</Paragraph>
+
 <NewsPagePostInfo UserName="Mladen Macanović" ImageName="mladen" PostedOn="March 10th, 2025" Read="7 min" />
diff --git a/Source/Extensions/Blazorise.Cropper/Cropper.razor.cs b/Source/Extensions/Blazorise.Cropper/Cropper.razor.cs
@@ -261,6 +261,12 @@ internal async Task NotifyImageReady()
             await ImageReady.Invoke();
     }
 
+    internal async Task NotifyImageLoadingFailed( string errorMessage )
+    {
+        if ( ImageLoadingFailed is not null )
+            await ImageLoadingFailed.Invoke( errorMessage );
+    }
+
     #endregion
 
     #region Properties
@@ -276,9 +282,9 @@ internal async Task NotifyImageReady()
     protected override bool ShouldAutoGenerateId => true;
 
     /// <summary>
-    /// The original image source.
+    /// The source of the image.
     /// </summary>
-    [Parameter] public string Source { get; set; }
+    [Parameter, EditorRequired] public string Source { get; set; }
 
     /// <summary>
     /// The alt text of the image.
@@ -325,6 +331,11 @@ internal async Task NotifyImageReady()
     /// </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. Returns an error message as a parameter.
+    /// </summary>
+    [Parameter] public Func<string, Task> ImageLoadingFailed { get; set; }
+
     /// <summary>
     /// Indicates whether this element is disabled.
     /// </summary>

diff --git a/Source/Extensions/Blazorise.Cropper/CropperAdapter.cs b/Source/Extensions/Blazorise.Cropper/CropperAdapter.cs
@@ -32,4 +32,7 @@ public CropperAdapter( Cropper cropper )
 
     [JSInvokable( "ImageReady" )]
     public async ValueTask ImageReady() => await cropper.NotifyImageReady();
+
+    [JSInvokable( "ImageLoadingFailed" )]
+    public async ValueTask ImageLoadingFailed( string errorMessage ) => await cropper.NotifyImageLoadingFailed( errorMessage );
 }
diff --git a/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js b/Source/Extensions/Blazorise.Cropper/wwwroot/blazorise.cropper.js
@@ -302,7 +302,8 @@ function manageCropperImageReady(cropperImage, cropperCanvas, instance) {
         }
         invokeDotNetMethodAsync(instance.adapter, "ImageReady");
     })
-        .catch(() => {
+        .catch((err) => {
+            invokeDotNetMethodAsync(instance.adapter, "ImageLoadingFailed", err.message);
             instance.disabledBeforeImageLoadFailed = cropperCanvas.disabled;
             instance.loadFailed = true;
             cropperCanvas.disabled = true;