Implement UploadComplete event in RadzenHtmlEditor.

radzenhq · Sep 12, 2024 · 6a8611c · 6a8611c
1 parent 3ba3610
commit 6a8611c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/Radzen.Blazor/RadzenHtmlEditor.razor.cs b/Radzen.Blazor/RadzenHtmlEditor.razor.cs
@@ -416,5 +416,41 @@ public override void Dispose()
                 JSRuntime.InvokeVoidAsync("Radzen.destroyEditor", ContentEditable);
             }
         }
+
+        /// <summary>
+        /// Gets or sets the callback which when a file is uploaded.
+        /// </summary>
+        /// <value>The complete callback.</value>
+        [Parameter]
+        public EventCallback<UploadCompleteEventArgs> UploadComplete { get; set; }
+
+
+        internal async Task RaiseUploadComplete(UploadCompleteEventArgs args)
+        {
+            await UploadComplete.InvokeAsync(args);
+        }
+
+        /// <summary>
+        /// Invoked by interop when the upload is complete.
+        /// </summary>
+        [JSInvokable("OnUploadComplete")]
+        public async Task OnUploadComplete(string response)
+        {
+            System.Text.Json.JsonDocument doc = null;
+
+            if (!string.IsNullOrEmpty(response))
+            {
+                try
+                {
+                    doc = System.Text.Json.JsonDocument.Parse(response);
+                }
+                catch (System.Text.Json.JsonException)
+                {
+                    //
+                }
+            }
+
+            await UploadComplete.InvokeAsync(new UploadCompleteEventArgs() { RawResponse = response, JsonResponse = doc });
+        }
     }
 }
diff --git a/Radzen.Blazor/RadzenHtmlEditorImage.razor.cs b/Radzen.Blazor/RadzenHtmlEditorImage.razor.cs
@@ -107,6 +107,8 @@ async Task OnUploadComplete(UploadCompleteEventArgs args)
             {
                 DialogService.Close(true);
             }
+
+            await Editor.RaiseUploadComplete(args);
         }
 
         async Task OnUploadError(UploadErrorEventArgs args)

diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js
@@ -1885,6 +1885,7 @@ window.Radzen = {
                         } else {
                           document.execCommand("insertHTML", false, '<img src="' + result.url + '">');
                         }
+                        instance.invokeMethodAsync('OnUploadComplete', xhr.responseText);
                     } else {
                         instance.invokeMethodAsync('OnError', xhr.responseText);
                     }

diff --git a/RadzenBlazorDemos/Pages/HtmlEditorGetSetValue.razor b/RadzenBlazorDemos/Pages/HtmlEditorGetSetValue.razor
@@ -1,4 +1,4 @@
-<RadzenHtmlEditor @bind-Value=@htmlValue style="height: 450px;" Input=@OnInput Change=@OnChange Paste=@OnPaste Execute=@OnExecute UploadUrl="upload/image" />
+<RadzenHtmlEditor @bind-Value=@htmlValue style="height: 450px;" Input=@OnInput Change=@OnChange Paste=@OnPaste UploadComplete=@OnUploadComplete Execute=@OnExecute UploadUrl="upload/image" />
 
 <EventConsole @ref=@console />
 
@@ -34,4 +34,9 @@
     {
         console.Log($"Execute: {args.CommandName}");
     }
+
+    void OnUploadComplete(UploadCompleteEventArgs args)
+    {
+        console.Log($"Upload complete: {args.RawResponse}");
+    }
 }