Markdown: merge uploaded files callback (#5980)

* Adds Debug.WriteLine to see the js exception.

* Fixes the issue where reference exists in c#, but the file is deleted (by creating new empty dictionary) in js. Introduces "bug" where file entries in js keeps growing. To be fixed in the next commit.

* Fixes issue where fileEntries were growing indifferently in js. The deleting of the file entry is bound to the lifetime of the c# FileEntry instance. When garbage collecting the instance, the entry is deleted from js. This ensures synchronization of existing (reachable) objects between c# and js. This commit extends the IFileEntryOwner.cs to keep the fileEntry deleting logic out of the interface implementations (FileEdit and Markdown)

* Implements debounce to buffer single calls of imageUploadFunction into one call to .net. Same on the .net side.

* docs update

* general "null" check on js dictionary.

* wrap the RemoveFileEntry in try catch.

* Formating

* RemoveFileEntry after all is ended

* removing fileEntry for fileEdit too. Deleting finalizer.

* Formating

* await for RemoveFileEntry

---------

Co-authored-by: Mladen Macanovic <mladen.macanovic@blazorise.com>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Markdown/MarkdownPage.razor

@@ -59,8 +59,6 @@
 <DocsPageSection>
     <DocsPageSectionHeader Title="Upload image">
         Uploading an image has a similar API to our <Code>FileEdit</Code> component and is fairly simple to use.
-        <Strong>Note that</Strong> the events related to file uploads fire separately for each file instead of grouping them.
-        This behavior comes from the underlying Easy Markdown Editor, which processes files individually.
     </DocsPageSectionHeader>
     <DocsPageSectionContent Outlined FullWidth>
         <MarkdownUploadImageExample />

Source/Blazorise/Components/FileEdit/FileEdit.razor.cs

@@ -148,6 +148,11 @@ public async Task NotifyChange( FileEntry[] files )
 
         await Changed.InvokeAsync( new( files ) );
 
+        foreach ( var file in files )
+        {
+            await file.Owner.RemoveFileEntry( file.Id );
+        }
+
         await InvokeAsync( StateHasChanged );
     }
 

Source/Blazorise/Interfaces/Modules/IJSFileModule.cs

@@ -32,5 +32,11 @@ public interface IJSFileModule : IBaseJSModule
     /// <returns>A task that represents the asynchronous operation.</returns>
     ValueTask<IJSStreamReference> ReadDataAsync( ElementReference elementRef, int fileEntryId, CancellationToken cancellationToken = default );
 
-
+    /// <summary>
+    /// Removes file entry from js dictionary
+    /// </summary>
+    /// <param name="elementRef">Reference to the rendered element.</param>
+    /// <param name="fileEntryId"></param>
+    /// <returns>A task that represents the asynchronous operation.</returns>
+    ValueTask RemoveFileEntry( ElementReference elementRef, int fileEntryId );
 }

Source/Blazorise/Modules/BaseJSModule.cs

@@ -1,5 +1,6 @@
 #region Using directives
 using System;
+using System.Diagnostics;
 using System.Threading.Tasks;
 using Blazorise.Extensions;
 using Microsoft.JSInterop;
@@ -136,8 +137,9 @@ protected virtual async ValueTask InvokeSafeVoidAsync( string identifier, params
 
                 await module.InvokeVoidAsync( identifier, args );
             }
-            catch ( Exception )
+            catch ( Exception exc )
             {
+                Debug.WriteLine( $"Exception form InvokeSafeVoidAsync: {exc.Message}" );
             }
         }
         else
@@ -181,8 +183,9 @@ protected virtual async ValueTask<TValue> InvokeSafeAsync<TValue>( string identi
 
                 return await module.InvokeAsync<TValue>( identifier, args );
             }
-            catch ( Exception )
+            catch ( Exception exc )
             {
+                Debug.WriteLine( $"Exception form InvokeSafeVoidAsync: {exc.Message}" );
                 return default;
             }
         }

Source/Blazorise/Modules/JSFileModule.cs

@@ -37,6 +37,10 @@ public JSFileModule( IJSRuntime jsRuntime, IVersionProvider versionProvider, Bla
     public virtual ValueTask<IJSStreamReference> ReadDataAsync( ElementReference elementRef, int fileEntryId, CancellationToken cancellationToken = default )
         => InvokeSafeAsync<IJSStreamReference>( "readFileDataStream", elementRef, fileEntryId );
 
+    /// <inheritdoc/>
+    public virtual ValueTask RemoveFileEntry( ElementReference elementRef, int fileEntryId )
+        => InvokeSafeVoidAsync( "removeFileEntry", elementRef, fileEntryId );
+
     #endregion
 
     #region Properties

Source/Blazorise/Utilities/IO/FileEntry.cs

@@ -1,5 +1,6 @@
 #region Using directives
 using System;
+using System.Diagnostics;
 using System.IO;
 using System.Threading;
 using System.Threading.Tasks;
@@ -12,7 +13,7 @@ namespace Blazorise;
 /// </summary>
 public class FileEntry : IFileEntry
 {
-    #region members
+    #region Members
 
     CancellationTokenSource writeToStreamcancellationTokenSource;
     CancellationTokenSource openReadStreamcancellationTokenSource;

Source/Blazorise/Utilities/IO/IFileEntryOwner.cs

@@ -2,6 +2,8 @@
 using System.IO;
 using System.Threading;
 using System.Threading.Tasks;
+using Blazorise.Modules;
+using Microsoft.AspNetCore.Components;
 #endregion
 
 namespace Blazorise;
@@ -27,4 +29,25 @@ public interface IFileEntryOwner
     /// <param name="cancellationToken">A cancellation token to signal the cancellation of streaming file data.</param>
     /// <returns>Returns the stream for the uploaded file entry.</returns>
     Stream OpenReadStream( FileEntry fileEntry, CancellationToken cancellationToken = default );
+
+    /// <summary>
+    /// Removes the file entry from js dictionary.
+    /// </summary>
+    /// <param name="fileEntryId"></param>
+    /// <param name="cancellationToken"></param>
+    /// <returns></returns>
+    async Task RemoveFileEntry( int fileEntryId, CancellationToken cancellationToken = default )
+    {
+        await JSFileModule.RemoveFileEntry( ElementRef, fileEntryId );
+    }
+
+    /// <summary>
+    /// Element reference.
+    /// </summary>
+    ElementReference ElementRef { get; set; }
+
+    /// <summary>
+    /// JS file module.
+    /// </summary>    
+    IJSFileModule JSFileModule { get; set; }
 }

Source/Blazorise/wwwroot/fileEdit.js

@@ -75,7 +75,10 @@ export function open(element, elementId) {
 
 // Reduce to purely serializable data, plus build an index by ID
 function mapElementFilesToFileEntries(element) {
-    element._blazorFilesById = {};
+
+    if (!element._blazorFilesById) {
+        element._blazorFilesById = {};
+    }
 
     let fileList = Array.prototype.map.call(element.files, function (file) {
         file.id = file.id ?? ++nextFileId;

Source/Blazorise/wwwroot/io.js

@@ -49,6 +49,10 @@ function getFileById(element, fileId) {
     return file;
 }
 
+export function removeFileEntry(element, fileEntryId) {
+    delete element._blazorFilesById[fileEntryId];
+}
+
 function getArrayBufferFromFileAsync(element, fileId) {
     var file = getFileById(element, fileId);
 

Source/Extensions/Blazorise.Markdown/Markdown.razor.cs

@@ -272,20 +272,34 @@ public Task NotifyCustomButtonClicked( string name, object value )
     /// <summary>
     /// Notifies the component that file input value has changed. This method is intended for internal framework use only and should not be called directly by user code.
     /// </summary>
-    /// <param name="file">Changed file.</param>
+    /// <param name="fileEntries">Array of changed file</param>
     /// <returns>A task that represents the asynchronous operation.</returns>
     [JSInvokable]
-    public async Task NotifyImageUpload( FileEntry file )
+    public async Task NotifyImageUpload( FileEntry[] fileEntries )
     {
-        file.FileUploadEndedCallback = new();
+        foreach ( var file in fileEntries )
+        {
+            file.FileUploadEndedCallback = new();
 
-        // So that method invocations on the file can be dispatched back here
-        file.Owner = (IFileEntryOwner)(object)this;
+            // So that method invocations on the file can be dispatched back here
+            file.Owner = this;
+        }
 
         if ( ImageUploadChanged is not null )
-            await ImageUploadChanged.Invoke( new( file ) );
+        {
+            await ImageUploadChanged.Invoke( new( fileEntries ) );
+        }
+
+        foreach ( var file in fileEntries )
+        {
+            file.FileUploadEndedCallback.SetResult();
+        }
+
+        foreach ( var file in fileEntries )
+        {
+            await file.Owner.RemoveFileEntry( file.Id );
+        }
 
-        file.FileUploadEndedCallback.SetResult();
         await InvokeAsync( StateHasChanged );
     }
 

Source/Extensions/Blazorise.Markdown/wwwroot/markdown.js

@@ -50,6 +50,9 @@ export function initialize(dotNetObjectRef, element, elementId, options) {
         onError: (e) => { }
     };
 
+    let fileEntriesToNotifyBuffer = [];
+    let notifyUploadTimer = null;
+
     const mdeOptions = {
         element: document.getElementById(elementId),
         hideIcons: options.hideIcons,
@@ -80,7 +83,7 @@ export function initialize(dotNetObjectRef, element, elementId, options) {
             imageUploadNotifier.onError = onError;
 
             // Reduce to purely serializable data, plus build an index by ID
-            if (element._blazorFilesById == null) {
+            if (!element._blazorFilesById) {
                 element._blazorFilesById = {};
             }
 
@@ -97,9 +100,26 @@ export function initialize(dotNetObjectRef, element, elementId, options) {
             // Attach the blob data itself as a non-enumerable property so it doesn't appear in the JSON
             Object.defineProperty(fileEntry, 'blob', { value: file });
 
-            dotNetObjectRef.invokeMethodAsync('NotifyImageUpload', fileEntry).then(null, function (err) {
-                throw new Error(err);
-            });
+            fileEntriesToNotifyBuffer.push(fileEntry);
+
+            // Reset debounce timer: if a new file is added within 100ms, reset the timer
+            if (notifyUploadTimer) {
+                clearTimeout(notifyUploadTimer);
+            }
+
+            notifyUploadTimer = setTimeout(() => {
+                // Send batched files to .NET when no more files arrive within 100ms
+                dotNetObjectRef.invokeMethodAsync('NotifyImageUpload', fileEntriesToNotifyBuffer)
+                    .then(() => {
+                        fileEntriesToNotifyBuffer = [];
+                    })
+                    .catch(err => {
+                        fileEntriesToNotifyBuffer = [];
+                        throw new Error(err);
+                    });
+
+                notifyUploadTimer = null;
+            }, 100);
         },
 
         errorMessages: options.errorMessages,