Fix FileDownload logic

Author: rolandVi

src/Components/Web.JS/src/Rendering/BinaryMedia.ts

@@ -315,121 +315,44 @@ export class BinaryMedia {
     element: HTMLElement,
     streamRef: { stream: () => Promise<ReadableStream<Uint8Array>> } | null,
     mimeType: string,
-    cacheKey: string,
     totalBytes: number | null,
-    fileName?: string | null,
-    attemptNativePicker = true,
-  ): Promise<MediaLoadResult> {
-    if (!element || !cacheKey) {
-      return { success: false, fromCache: false, objectUrl: null, error: 'Invalid parameters' };
-    }
-
-    const nativePickerAvailable = attemptNativePicker && typeof (window as unknown as { showSaveFilePicker?: unknown }).showSaveFilePicker === 'function';
-
-    // Try cache first
-    let cacheHitBlob: Blob | null = null;
-    let _fromCache = false;
-    try {
-      const cache = await this.getCache();
-      if (cache) {
-        const cached = await cache.match(encodeURIComponent(cacheKey));
-        if (cached) {
-          cacheHitBlob = await cached.blob();
-          _fromCache = true;
-        }
-      }
-    } catch (err) {
-      this.logger.log(LogLevel.Debug, `Cache lookup failed (download): ${err}`);
-    }
-
-    // If we have a cache hit and native picker is available, stream blob to file directly
-    if (cacheHitBlob && nativePickerAvailable) {
-      try {
-        const handle = await (window as unknown as { showSaveFilePicker: (opts: any) => Promise<any> }).showSaveFilePicker({ suggestedName: fileName || cacheKey }); // eslint-disable-line @typescript-eslint/no-explicit-any
-        const writer = await handle.createWritable();
-        const stream = cacheHitBlob.stream();
-        const result = await this.writeStreamToFile(element, stream as ReadableStream<Uint8Array>, writer, totalBytes);
-        if (result === 'success') {
-          return { success: true, fromCache: true, objectUrl: null };
-        }
-        // aborted treated as failure
-        return { success: false, fromCache: true, objectUrl: null, error: 'Aborted' };
-      } catch (pickerErr) {
-        // User might have cancelled; fall back to anchor download if we still have blob
-        this.logger.log(LogLevel.Debug, `Native picker path failed or cancelled: ${pickerErr}`);
-      }
-    }
-
-    if (cacheHitBlob && !nativePickerAvailable) {
-      // Fallback anchor path using cached blob
-      const url = URL.createObjectURL(cacheHitBlob);
-      this.triggerDownload(url, (fileName || cacheKey));
-      return { success: true, fromCache: true, objectUrl: url };
-    }
-
-    if (!streamRef) {
-      return { success: false, fromCache: false, objectUrl: null, error: 'No stream provided' };
+    fileName: string,
+  ): Promise<boolean> {
+    if (!element || !fileName || !streamRef) {
+      return false;
     }
 
-    // Stream and optionally cache (dup logic from streamAndCreateUrl, without setting element attributes)
     this.loadingElements.add(element);
     const controller = new AbortController();
     this.controllers.set(element, controller);
 
     try {
       const readable = await streamRef.stream();
 
-      // If native picker available, we can stream directly to file, optionally tee for cache
-      if (nativePickerAvailable) {
+      // Native picker direct-to-file streaming available
+      if (typeof (window as any).showSaveFilePicker === 'function') { // eslint-disable-line @typescript-eslint/no-explicit-any
         try {
-          const handle = await (window as unknown as { showSaveFilePicker: (opts: any) => Promise<any> }).showSaveFilePicker({ suggestedName: fileName || cacheKey }); // eslint-disable-line @typescript-eslint/no-explicit-any
-          const writer = await handle.createWritable();
-
-          let workingStream: ReadableStream<Uint8Array> = readable;
-          let cacheStream: ReadableStream<Uint8Array> | null = null;
-          if (cacheKey) {
-            const cache = await this.getCache();
-            if (cache) {
-              const tees = readable.tee();
-              workingStream = tees[0];
-              cacheStream = tees[1];
-              cache.put(encodeURIComponent(cacheKey), new Response(cacheStream)).catch(err => {
-                this.logger.log(LogLevel.Debug, `Failed to put cache entry (download/native): ${err}`);
-              });
-            }
-          }
+          const handle = await (window as any).showSaveFilePicker({ suggestedName: fileName}); // eslint-disable-line @typescript-eslint/no-explicit-any
 
-          const writeResult = await this.writeStreamToFile(element, workingStream, writer, totalBytes, controller);
+          const writer = await handle.createWritable();
+          const writeResult = await this.writeStreamToFile(element, readable, writer, totalBytes, controller);
           if (writeResult === 'success') {
-            return { success: true, fromCache: false, objectUrl: null };
+            return true;
           }
           if (writeResult === 'aborted') {
-            return { success: false, fromCache: false, objectUrl: null, error: 'Aborted' };
+            return false;
           }
         } catch (pickerErr) {
-          this.logger.log(LogLevel.Debug, `Native picker streaming path failed or cancelled after selection: ${pickerErr}`);
-          // Fall through to in-memory blob fallback
-        }
-      }
-
-      // In-memory path (existing logic)
-      let displayStream: ReadableStream<Uint8Array> = readable;
-      if (cacheKey) {
-        const cache = await this.getCache();
-        if (cache) {
-          const [display, cacheStream] = readable.tee();
-          displayStream = display;
-          cache.put(encodeURIComponent(cacheKey), new Response(cacheStream)).catch(err => {
-            this.logger.log(LogLevel.Debug, `Failed to put cache entry (download): ${err}`);
-          });
+          this.logger.log(LogLevel.Debug, `Native picker streaming path failed or cancelled: ${pickerErr}`);
         }
       }
 
+      // In-memory fallback: read all bytes then trigger anchor download
       const chunks: Uint8Array[] = [];
       let bytesRead = 0;
-      for await (const chunk of this.iterateStream(displayStream, controller.signal)) {
+      for await (const chunk of this.iterateStream(readable, controller.signal)) {
         if (controller.signal.aborted) {
-          return { success: false, fromCache: false, objectUrl: null, error: 'Aborted' };
+          return false;
         }
         chunks.push(chunk);
         bytesRead += chunk.byteLength;
@@ -440,17 +363,18 @@ export class BinaryMedia {
       }
 
       if (bytesRead === 0) {
-        return { success: false, fromCache: false, objectUrl: null, error: 'Empty stream' };
+        return false;
       }
 
       const combined = this.combineChunks(chunks);
       const blob = new Blob([combined], { type: mimeType });
       const url = URL.createObjectURL(blob);
-      this.triggerDownload(url, fileName || cacheKey);
-      return { success: true, fromCache: false, objectUrl: url };
+      this.triggerDownload(url, fileName);
+
+      return true;
     } catch (error) {
       this.logger.log(LogLevel.Debug, `Error in downloadAsync: ${error}`);
-      return { success: false, fromCache: false, objectUrl: null, error: String(error) };
+      return false;
     } finally {
       if (this.controllers.get(element) === controller) {
         this.controllers.delete(element);
@@ -531,9 +455,11 @@ export class BinaryMedia {
       a.style.display = 'none';
       document.body.appendChild(a);
       a.click();
+
       setTimeout(() => {
         try {
-          document.body.removeChild(a);
+          a.remove();
+          URL.revokeObjectURL(url);
         } catch {
           // ignore
         }
@@ -543,18 +469,16 @@ export class BinaryMedia {
     }
   }
 
-  // Helper to stream data directly to a FileSystemWritableFileStream with progress & abort handling
   private static async writeStreamToFile(
     element: HTMLElement,
     stream: ReadableStream<Uint8Array>,
     writer: any, // eslint-disable-line @typescript-eslint/no-explicit-any
     totalBytes: number | null,
     controller?: AbortController
   ): Promise<'success' | 'aborted' | 'error'> {
-    const reader = stream.getReader();
     let written = 0;
     try {
-      for (;;) {
+      for await (const chunk of this.iterateStream(stream, controller?.signal)) {
         if (controller?.signal.aborted) {
           try {
             await writer.abort();
@@ -564,20 +488,44 @@ export class BinaryMedia {
           element.style.removeProperty('--blazor-media-progress');
           return 'aborted';
         }
-        const { done, value } = await reader.read();
-        if (done) {
-          break;
-        }
-        if (value) {
-          await writer.write(value);
-          written += value.byteLength;
-          if (totalBytes) {
-            const progress = Math.min(1, written / totalBytes);
-            element.style.setProperty('--blazor-media-progress', progress.toString());
+        try {
+          await writer.write(chunk);
+        } catch (wErr) {
+          if (controller?.signal.aborted) {
+            try {
+              await writer.abort();
+            } catch {
+              /* ignore */
+            }
+            return 'aborted';
           }
+          return 'error';
+        }
+        written += chunk.byteLength;
+        if (totalBytes) {
+          const progress = Math.min(1, written / totalBytes);
+          element.style.setProperty('--blazor-media-progress', progress.toString());
+        }
+      }
+
+      if (controller?.signal.aborted) {
+        try {
+          await writer.abort();
+        } catch {
+          /* ignore */
+        }
+        element.style.removeProperty('--blazor-media-progress');
+        return 'aborted';
+      }
+
+      try {
+        await writer.close();
+      } catch (closeErr) {
+        if (controller?.signal.aborted) {
+          return 'aborted';
         }
+        return 'error';
       }
-      await writer.close();
       return 'success';
     } catch (e) {
       try {
@@ -588,11 +536,6 @@ export class BinaryMedia {
       return controller?.signal.aborted ? 'aborted' : 'error';
     } finally {
       element.style.removeProperty('--blazor-media-progress');
-      try {
-        reader.releaseLock?.();
-      } catch {
-        /* ignore */
-      }
     }
   }
 }

src/Components/Web/src/Media/FileDownload.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.JSInterop;
 
 namespace Microsoft.AspNetCore.Components.Web.Media;
 
@@ -17,26 +18,26 @@ namespace Microsoft.AspNetCore.Components.Web.Media;
 public sealed class FileDownload : MediaComponentBase
 {
     /// <summary>
-    /// Optional file name to suggest to the browser for the download.
+    /// File name to suggest to the browser for the download. Must be provided.
     /// </summary>
-    [Parameter] public string? FileName { get; set; }
+    [Parameter, EditorRequired] public string FileName { get; set; } = default!;
 
     /// <summary>
     /// Provides custom button text. Defaults to "Download".
     /// </summary>
     [Parameter] public string? ButtonText { get; set; }
 
     /// <inheritdoc />
-    protected override string TagName => "button"; // Render a button element
+    protected override string TagName => "button";
 
     /// <inheritdoc />
-    protected override string TargetAttributeName => "data-download-object-url"; // Not an actual browser attribute; used for diagnostics.
+    protected override string TargetAttributeName => string.Empty; // Not used – object URL not tracked for downloads.
 
     /// <inheritdoc />
     protected override string MarkerAttributeName => "data-blazor-file-download";
 
     /// <inheritdoc />
-    protected override bool ShouldAutoLoad => false; // Manual trigger via click.
+    protected override bool ShouldAutoLoad => false;
 
     /// <summary>
     /// Builds the button element with click handler wiring.
@@ -45,68 +46,61 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, TagName);
 
-        if (!string.IsNullOrEmpty(_currentObjectUrl))
-        {
-            builder.AddAttribute(1, TargetAttributeName, _currentObjectUrl);
-        }
-
-        builder.AddAttribute(2, MarkerAttributeName, "");
+        // Removed object URL attribute emission; not needed for downloads.
+        builder.AddAttribute(1, MarkerAttributeName, "");
 
         if (IsLoading)
         {
-            builder.AddAttribute(3, "data-state", "loading");
+            builder.AddAttribute(2, "data-state", "loading");
         }
         else if (_hasError)
         {
-            builder.AddAttribute(3, "data-state", "error");
+            builder.AddAttribute(2, "data-state", "error");
         }
 
-        builder.AddAttribute(4, "type", "button");
-        builder.AddAttribute(5, "onclick", EventCallback.Factory.Create(this, OnClickAsync));
-        builder.AddMultipleAttributes(6, AdditionalAttributes);
-        builder.AddElementReferenceCapture(7, er => Element = er);
+        builder.AddAttribute(3, "type", "button");
+        builder.AddAttribute(4, "onclick", EventCallback.Factory.Create(this, OnClickAsync));
+        builder.AddMultipleAttributes(5, AdditionalAttributes);
+        builder.AddElementReferenceCapture(6, elementReference => Element = elementReference);
 
-        builder.AddContent(8, ButtonText ?? "Download");
+        builder.AddContent(7, ButtonText ?? "Download");
 
         builder.CloseElement();
     }
 
     private async Task OnClickAsync()
     {
-        if (Source is null || !IsInteractive)
+        if (Source is null || !IsInteractive || string.IsNullOrWhiteSpace(FileName))
         {
             return;
         }
 
-        // Cancel any existing load
         CancelPreviousLoad();
         var token = ResetCancellationToken();
-        _currentSource = Source;
         _hasError = false;
-        _currentObjectUrl = null; // Always recreate for downloads
-        RequestRender();
 
         var source = Source;
 
+        using var streamRef = new DotNetStreamReference(source.Stream, leaveOpen: true);
+
         try
         {
-            var result = await InvokeBinaryMediaAsync(
-                "Blazor._internal.BinaryMedia", // JS method we will add
-                source,
+            var result = await JSRuntime.InvokeAsync<Boolean>(
+                "Blazor._internal.BinaryMedia.downloadAsync",
                 token,
+                Element,
+                streamRef,
+                source.MimeType,
+                source.Length,
                 FileName);
 
-            if (result is not null && _activeCacheKey == source.CacheKey && !token.IsCancellationRequested)
+            if (result && !token.IsCancellationRequested)
             {
-                if (result.Success)
-                {
-                    _currentObjectUrl = result.ObjectUrl; // store created object URL for potential diagnostics
-                }
-                else
+                if (!result)
                 {
                     _hasError = true;
                 }
-                RequestRender();
+                Render();
             }
         }
         catch (OperationCanceledException)
@@ -115,7 +109,7 @@ private async Task OnClickAsync()
         catch
         {
             _hasError = true;
-            RequestRender();
+            Render();
         }
     }
 }