FilePicker and Markdown: Remove file entries on destroy and file change event

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

@@ -148,11 +148,6 @@ 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

@@ -36,7 +36,7 @@ public interface IJSFileModule : IBaseJSModule
     /// Removes file entry from js dictionary
     /// </summary>
     /// <param name="elementRef">Reference to the rendered element.</param>
-    /// <param name="fileEntryId"></param>
+    /// <param name="fileEntryId">File id.</param>
     /// <returns>A task that represents the asynchronous operation.</returns>
     ValueTask RemoveFileEntry( ElementReference elementRef, int fileEntryId );
 }

Source/Blazorise/Utilities/IO/IFileEntryOwner.cs

@@ -33,12 +33,12 @@ public interface IFileEntryOwner
     /// <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 )
+    /// <param name="fileEntry">Currently processed file entry.</param>
+    /// <param name="cancellationToken">A cancellation token to signal the cancellation of streaming file data.</param>
+    /// <returns>A task that represents the asynchronous operation.</returns>
+    async Task RemoveFileEntry( FileEntry fileEntry, CancellationToken cancellationToken = default )
     {
-        await JSFileModule.RemoveFileEntry( ElementRef, fileEntryId );
+        await JSFileModule.RemoveFileEntry( ElementRef, fileEntry.Id );
     }
 
     /// <summary>

Source/Blazorise/Utilities/IO/RemoteFileEntryStreamReader.cs

@@ -49,7 +49,7 @@ private async Task<Stream> OpenReadStreamAsync( CancellationToken cancellationTo
         jsStreamReference = await JSModule.ReadDataAsync( ElementRef, FileEntry.Id, cancellationToken );
 
         return await jsStreamReference.OpenReadStreamAsync(
-            this.maxFileSize,
+            maxFileSize,
             cancellationToken: cancellationToken );
     }
 

Source/Blazorise/wwwroot/fileEdit.js

@@ -1,4 +1,5 @@
 import { getRequiredElement } from "./utilities.js?v=1.7.4.0";
+import { removeAllFileEntries } from "./io.js?v=1.7.4.0";
 
 const _instances = [];
 let nextFileId = 0;
@@ -39,8 +40,17 @@ export function removeFile(element, elementId, fileId) {
 }
 
 export function destroy(element, elementId) {
-    var instances = _instances || {};
-    delete instances[elementId];
+    const instances = _instances || {};
+
+    const instance = instances[elementId];
+
+    if (instance) {
+        if (element) {
+            removeAllFileEntries(element);
+        }
+
+        delete instances[elementId];
+    }
 }
 
 export function reset(element, elementId) {
@@ -75,11 +85,12 @@ export function open(element, elementId) {
 
 // Reduce to purely serializable data, plus build an index by ID
 function mapElementFilesToFileEntries(element) {
-
     if (!element._blazorFilesById) {
         element._blazorFilesById = {};
     }
 
+    removeAllFileEntries(element);
+
     let fileList = Array.prototype.map.call(element.files, function (file) {
         file.id = file.id ?? ++nextFileId;
         var fileEntry = {

Source/Blazorise/wwwroot/io.js

@@ -53,6 +53,14 @@ export function removeFileEntry(element, fileEntryId) {
     delete element._blazorFilesById[fileEntryId];
 }
 
+export function removeAllFileEntries(element) {
+    if (element && element._blazorFilesById) {
+        for (var fileId in element._blazorFilesById) {
+            removeFileEntry(element, fileId);
+        }
+    }
+}
+
 function getArrayBufferFromFileAsync(element, fileId) {
     var file = getFileById(element, fileId);
 

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

@@ -297,7 +297,7 @@ public async Task NotifyImageUpload( FileEntry[] fileEntries )
 
         foreach ( var file in fileEntries )
         {
-            await file.Owner.RemoveFileEntry( file.Id );
+            await file.Owner.RemoveFileEntry( file );
         }
 
         await InvokeAsync( StateHasChanged );

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

@@ -1,5 +1,6 @@
 import "./vendors/easymde.js?v=1.7.4.0";
 import "./vendors/highlight.js?v=1.7.4.0";
+import { removeAllFileEntries } from "../Blazorise/io.js?v=1.7.4.0";
 
 document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<link rel=\"stylesheet\" href=\"_content/Blazorise.Markdown/vendors/easymde.css?v=1.7.4.0\" />");
 
@@ -191,6 +192,10 @@ export function destroy(element, elementId) {
     const instance = instances[elementId];
 
     if (instance) {
+        if (element) {
+            removeAllFileEntries(element);
+        }
+
         instance.editor.toTextArea();
         instance.editor = null;