Blazor Byte Array Interop Support

src/Components/Server/src/BlazorPack/BlazorPackHubProtocolWorker.cs

@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
 using System;
+using System.Buffers;
 using System.IO;
 using MessagePack;
 using Microsoft.AspNetCore.SignalR.Protocol;
@@ -34,6 +35,20 @@ protected override object DeserializeObject(ref MessagePackReader reader, Type t
                 {
                     return reader.ReadSingle();
                 }
+                else if (type == typeof(byte[]))
+                {
+                    var bytes = reader.ReadBytes();
+                    if (!bytes.HasValue)
+                    {
+                        return null;
+                    }
+                    else if (bytes.Value.Length == 0)
+                    {
+                        return Array.Empty<byte>();
+                    }
+
+                    return bytes.Value.ToArray();
+                }
             }
             catch (Exception ex)
             {
@@ -75,6 +90,10 @@ protected override void Serialize(ref MessagePackWriter writer, Type type, objec
                     writer.Write(bytes);
                     break;
 
+                case byte[] byteArray:
+                    writer.Write(byteArray);
+                    break;
+
                 default:
                     throw new FormatException($"Unsupported argument type {type}");
             }

src/Components/Server/src/Circuits/CircuitHost.cs

@@ -398,6 +398,31 @@ await Renderer.Dispatcher.InvokeAsync(() =>
             }
         }
 
+        // SupplyByteArray is used in a fire-and-forget context, so it's responsible for its own
+        // error handling.
+        internal async Task SupplyByteArray(long id, byte[] data)
+        {
+            AssertInitialized();
+            AssertNotDisposed();
+
+            try
+            {
+                await Renderer.Dispatcher.InvokeAsync(() =>
+                {
+                    Log.SupplyByteArraySuccess(_logger, id);
+                    DotNetDispatcher.SupplyByteArray(JSRuntime, id, data);
+                });
+            }
+            catch (Exception ex)
+            {
+                // An error completing JS interop means that the user sent invalid data, a well-behaved
+                // client won't do this.
+                Log.SupplyByteArrayException(_logger, id, ex);
+                await TryNotifyClientErrorAsync(Client, GetClientErrorMessage(ex, "Invalid byte array."));
+                UnhandledException?.Invoke(this, new UnhandledExceptionEventArgs(ex, isTerminating: false));
+            }
+        }
+
         // DispatchEvent is used in a fire-and-forget context, so it's responsible for its own
         // error handling.
         public async Task DispatchEvent(string eventDescriptorJson, string eventArgsJson)
@@ -613,6 +638,8 @@ private static class Log
             private static readonly Action<ILogger, Exception> _endInvokeDispatchException;
             private static readonly Action<ILogger, long, string, Exception> _endInvokeJSFailed;
             private static readonly Action<ILogger, long, Exception> _endInvokeJSSucceeded;
+            private static readonly Action<ILogger, long, Exception> _supplyByteArraySuccess;
+            private static readonly Action<ILogger, long, Exception> _supplyByteArrayException;    
             private static readonly Action<ILogger, Exception> _dispatchEventFailedToParseEventData;
             private static readonly Action<ILogger, string, Exception> _dispatchEventFailedToDispatchEvent;
             private static readonly Action<ILogger, string, CircuitId, Exception> _locationChange;
@@ -655,6 +682,8 @@ private static class EventIds
                 public static readonly EventId LocationChangeFailed = new EventId(210, "LocationChangeFailed");
                 public static readonly EventId LocationChangeFailedInCircuit = new EventId(211, "LocationChangeFailedInCircuit");
                 public static readonly EventId OnRenderCompletedFailed = new EventId(212, "OnRenderCompletedFailed");
+                public static readonly EventId SupplyByteArraySucceeded = new EventId(213, "SupplyByteArraySucceeded");
+                public static readonly EventId SupplyByteArrayException = new EventId(214, "SupplyByteArrayException");
             }
 
             static Log()
@@ -774,6 +803,16 @@ static Log()
                     EventIds.EndInvokeJSSucceeded,
                     "The JS interop call with callback id '{AsyncCall}' succeeded.");
 
+                _supplyByteArraySuccess = LoggerMessage.Define<long>(
+                    LogLevel.Debug,
+                    EventIds.SupplyByteArraySucceeded,
+                    "The SupplyByteArray call with id '{id}' succeeded.");
+
+                _supplyByteArrayException = LoggerMessage.Define<long>(
+                    LogLevel.Debug,
+                    EventIds.SupplyByteArrayException,
+                    "The SupplyByteArray call with id '{id}' failed.");
+
                 _dispatchEventFailedToParseEventData = LoggerMessage.Define(
                     LogLevel.Debug,
                     EventIds.DispatchEventFailedToParseEventData,
@@ -836,6 +875,8 @@ public static void CircuitHandlerFailed(ILogger logger, CircuitHandler handler,
             public static void EndInvokeDispatchException(ILogger logger, Exception ex) => _endInvokeDispatchException(logger, ex);
             public static void EndInvokeJSFailed(ILogger logger, long asyncHandle, string arguments) => _endInvokeJSFailed(logger, asyncHandle, arguments, null);
             public static void EndInvokeJSSucceeded(ILogger logger, long asyncCall) => _endInvokeJSSucceeded(logger, asyncCall, null);
+            internal static void SupplyByteArraySuccess(ILogger logger, long id) => _supplyByteArraySuccess(logger, id, null);
+            internal static void SupplyByteArrayException(ILogger logger, long id, Exception ex) => _supplyByteArrayException(logger, id, ex);
             public static void DispatchEventFailedToParseEventData(ILogger logger, Exception ex) => _dispatchEventFailedToParseEventData(logger, ex);
             public static void DispatchEventFailedToDispatchEvent(ILogger logger, string eventHandlerId, Exception ex) => _dispatchEventFailedToDispatchEvent(logger, eventHandlerId ?? "", ex);
 

src/Components/Server/src/Circuits/RemoteJSRuntime.cs

@@ -75,6 +75,11 @@ protected override void EndInvokeDotNet(DotNetInvocationInfo invocationInfo, in
             }
         }
 
+        protected override void SupplyByteArray(long id, byte[] data)
+        {
+            _clientProxy.SendAsync("JS.SupplyByteArray", id, data);
+        }
+
         protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
         {
             if (_clientProxy is null)

src/Components/Server/src/ComponentHub.cs

@@ -209,6 +209,17 @@ public async ValueTask EndInvokeJSFromDotNet(long asyncHandle, bool succeeded, s
             _ = circuitHost.EndInvokeJSFromDotNet(asyncHandle, succeeded, arguments);
         }
 
+        public async ValueTask SupplyByteArray(long id, byte[] data)
+        {
+            var circuitHost = await GetActiveCircuitAsync();
+            if (circuitHost == null)
+            {
+                return;
+            }
+
+            await circuitHost.SupplyByteArray(id, data);
+        }
+
         public async ValueTask DispatchBrowserEvent(string eventDescriptor, string eventArgs)
         {
             var circuitHost = await GetActiveCircuitAsync();

src/Components/Shared/src/ArrayBuilder.cs

@@ -14,6 +14,8 @@ namespace Ignitor
 namespace Microsoft.AspNetCore.Components.WebView
 #elif COMPONENTS_SERVER
 namespace Microsoft.AspNetCore.Components.Server.Circuits
+#elif JS_INTEROP
+namespace Microsoft.JSInterop.Infrastructure
 #else
 namespace Microsoft.AspNetCore.Components.RenderTree
 #endif

src/Components/Web.JS/src/Boot.Server.ts

@@ -105,6 +105,7 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   connection.on('JS.AttachComponent', (componentId, selector) => attachRootComponentToLogicalElement(0, circuit.resolveElement(selector), componentId));
   connection.on('JS.BeginInvokeJS', DotNet.jsCallDispatcher.beginInvokeJSFromDotNet);
   connection.on('JS.EndInvokeDotNet', DotNet.jsCallDispatcher.endInvokeDotNetFromJS);
+  connection.on('JS.SupplyByteArray', DotNet.jsCallDispatcher.supplyByteArray);
 
   const renderQueue = RenderQueue.getOrCreate(logger);
   connection.on('JS.RenderBatch', (batchId: number, batchData: Uint8Array) => {
@@ -134,6 +135,9 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
     endInvokeJSFromDotNet: (asyncHandle, succeeded, argsJson): void => {
       connection.send('EndInvokeJSFromDotNet', asyncHandle, succeeded, argsJson);
     },
+    supplyByteArray: (id: number, data: Uint8Array): void => {
+      connection.send('SupplyByteArray', id, data);
+    },
   });
 
   return connection;

src/Components/Web.JS/src/Boot.WebView.ts

@@ -4,7 +4,7 @@ import { shouldAutoStart } from './BootCommon';
 import { internalFunctions as navigationManagerFunctions } from './Services/NavigationManager';
 import { setEventDispatcher } from './Rendering/Events/EventDispatcher';
 import { startIpcReceiver } from './Platform/WebView/WebViewIpcReceiver';
-import { sendBrowserEvent, sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendLocationChanged } from './Platform/WebView/WebViewIpcSender';
+import { sendBrowserEvent, sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendSupplyByteArray, sendLocationChanged } from './Platform/WebView/WebViewIpcSender';
 import { InputFile } from './InputFile';
 
 let started = false;
@@ -20,6 +20,7 @@ async function boot(): Promise<void> {
   DotNet.attachDispatcher({
     beginInvokeDotNetFromJS: sendBeginInvokeDotNetFromJS,
     endInvokeJSFromDotNet: sendEndInvokeJSFromDotNet,
+    supplyByteArray: sendSupplyByteArray,
   });
 
   Blazor._internal.InputFile = InputFile;

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -485,6 +485,7 @@ function attachInteropInvoker(): void {
   const dotNetDispatcherInvokeMethodHandle = bindStaticMethod('Microsoft.AspNetCore.Components.WebAssembly', 'Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime', 'InvokeDotNet');
   const dotNetDispatcherBeginInvokeMethodHandle = bindStaticMethod('Microsoft.AspNetCore.Components.WebAssembly', 'Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime', 'BeginInvokeDotNet');
   const dotNetDispatcherEndInvokeJSMethodHandle = bindStaticMethod('Microsoft.AspNetCore.Components.WebAssembly', 'Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime', 'EndInvokeJS');
+  const dotNetDispatcherSupplyByteArrayMethodHandle = bindStaticMethod('Microsoft.AspNetCore.Components.WebAssembly', 'Microsoft.AspNetCore.Components.WebAssembly.Services.DefaultWebAssemblyJSRuntime', 'SupplyByteArray');
 
   DotNet.attachDispatcher({
     beginInvokeDotNetFromJS: (callId: number, assemblyName: string | null, methodIdentifier: string, dotNetObjectId: any | null, argsJson: string): void => {
@@ -506,9 +507,10 @@ function attachInteropInvoker(): void {
       );
     },
     endInvokeJSFromDotNet: (asyncHandle, succeeded, serializedArgs): void => {
-      dotNetDispatcherEndInvokeJSMethodHandle(
-        serializedArgs
-      );
+      dotNetDispatcherEndInvokeJSMethodHandle(serializedArgs);
+    },
+    supplyByteArray: (id: number, data: Uint8Array): void => {
+      dotNetDispatcherSupplyByteArrayMethodHandle(id, data);
     },
     invokeDotNetFromJS: (assemblyName, methodIdentifier, dotNetObjectId, argsJson) => {
       assertHeapIsNotLocked();

src/Components/Web.JS/src/Platform/WebView/WebViewIpcSender.ts

@@ -21,6 +21,10 @@ export function sendEndInvokeJSFromDotNet(asyncHandle: number, succeeded: boolea
   send('EndInvokeJS', asyncHandle, succeeded, argsJson);
 }
 
+export function sendSupplyByteArray(id: number, data: Uint8Array) {
+  send('SupplyByteArray', id, data);
+}
+
 export function sendLocationChanged(uri: string, intercepted: boolean) {
   send('OnLocationChanged', uri, intercepted);
   return Promise.resolve(); // Like in Blazor Server, we only issue the notification here - there's no need to wait for a response

src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts

@@ -5,6 +5,7 @@ export module DotNet {
 
   export type JsonReviver = ((key: any, value: any) => any);
   const jsonRevivers: JsonReviver[] = [];
+  const byteArraysToBeRevived = new Map<number, Uint8Array>();
 
   class JSObject {
     _cachedFunctions: Map<string, Function>;
@@ -169,7 +170,7 @@ export module DotNet {
   function invokePossibleInstanceMethod<T>(assemblyName: string | null, methodIdentifier: string, dotNetObjectId: number | null, args: any[] | null): T {
     const dispatcher = getRequiredDispatcher();
     if (dispatcher.invokeDotNetFromJS) {
-      const argsJson = JSON.stringify(args, argReplacer);
+      const argsJson = stringifyArgs(args);
       const resultJson = dispatcher.invokeDotNetFromJS(assemblyName, methodIdentifier, dotNetObjectId, argsJson);
       return resultJson ? parseJsonWithRevivers(resultJson) : null;
     } else {
@@ -188,7 +189,7 @@ export module DotNet {
     });
 
     try {
-      const argsJson = JSON.stringify(args, argReplacer);
+      const argsJson = stringifyArgs(args);
       getRequiredDispatcher().beginInvokeDotNetFromJS(asyncCallId, assemblyName, methodIdentifier, dotNetObjectId, argsJson);
     } catch (ex) {
       // Synchronous failure
@@ -267,6 +268,13 @@ export module DotNet {
      * @param resultOrError The serialized result or the serialized error from the async operation.
      */
     endInvokeJSFromDotNet(callId: number, succeeded: boolean, resultOrError: any): void;
+
+    /**
+     * Receives notification that a byte array is available for transfer.
+     * @param id The identifier for the byte array used during revival.
+     * @param data The byte array being transferred for eventual revival.
+     */
+     supplyByteArray(id: number, data: Uint8Array): void;
   }
 
   /**
@@ -304,7 +312,7 @@ export module DotNet {
 
       return result === null || result === undefined
         ? null
-        : JSON.stringify(result, argReplacer);
+        : stringifyArgs(result);
     },
 
     /**
@@ -329,7 +337,7 @@ export module DotNet {
         // On completion, dispatch result back to .NET
         // Not using "await" because it codegens a lot of boilerplate
         promise.then(
-          result => getRequiredDispatcher().endInvokeJSFromDotNet(asyncHandle, true, JSON.stringify([asyncHandle, true, createJSCallResult(result, resultType)], argReplacer)),
+          result => getRequiredDispatcher().endInvokeJSFromDotNet(asyncHandle, true, stringifyArgs([asyncHandle, true, createJSCallResult(result, resultType)])),
           error => getRequiredDispatcher().endInvokeJSFromDotNet(asyncHandle, false, JSON.stringify([asyncHandle, false, formatError(error)]))
         );
       }
@@ -346,6 +354,15 @@ export module DotNet {
         ? parseJsonWithRevivers(resultJsonOrExceptionMessage)
         : new Error(resultJsonOrExceptionMessage);
       completePendingCall(parseInt(asyncCallId), success, resultOrError);
+    },
+
+    /**
+     * Receives notification that a byte array is available for transfer.
+     * @param id The identifier for the byte array used during revival.
+     * @param data The byte array being transferred for eventual revival.
+     */
+    supplyByteArray: (id: number, data: Uint8Array): void => {
+      byteArraysToBeRevived.set(id, data);
     }
   }
 
@@ -394,24 +411,28 @@ export module DotNet {
   }
 
   const dotNetObjectRefKey = '__dotNetObject';
-  attachReviver(function reviveDotNetObject(key: any, value: any) {
-    if (value && typeof value === 'object' && value.hasOwnProperty(dotNetObjectRefKey)) {
-      return new DotNetObject(value.__dotNetObject);
-    }
-
-    // Unrecognized - let another reviver handle it
-    return value;
-  });
-
-  attachReviver(function reviveJSObjectReference(key: any, value: any) {
-    if (value && typeof value === 'object' && value.hasOwnProperty(jsObjectIdKey)) {
-      const id = value[jsObjectIdKey];
-      const jsObject = cachedJSObjectsById[id];
+  const byteArrayRefKey = '__byte[]';
+  attachReviver(function reviveReference(key: any, value: any) {
+    if (value && typeof value === 'object') {
+      if (value.hasOwnProperty(dotNetObjectRefKey)) {
+        return new DotNetObject(value.__dotNetObject);
+      } else if (value.hasOwnProperty(jsObjectIdKey)) {
+        const id = value[jsObjectIdKey];
+        const jsObject = cachedJSObjectsById[id];
+
+        if (jsObject) {
+          return jsObject.getWrappedObject();
+        } else {
+          throw new Error(`JS object instance with ID ${id} does not exist (has it been disposed?).`);
+        }
+      } else if (value.hasOwnProperty(byteArrayRefKey)) {
+        const index = value[byteArrayRefKey];
+        const byteArray = byteArraysToBeRevived.get(index);
+        if (byteArray === undefined) {
+          throw new Error(`Byte array index '${index}' does not exist.`);
+        }
 
-      if (jsObject) {
-        return jsObject.getWrappedObject();
-      } else {
-        throw new Error(`JS object instance with ID ${id} does not exist (has it been disposed?).`);
+        return byteArray;
       }
     }
 
@@ -430,7 +451,22 @@ export module DotNet {
     }
   }
 
-  function argReplacer(key: string, value: any) {
-    return value instanceof DotNetObject ? value.serializeAsArg() : value;
+  function stringifyArgs(args: any[] | null) {
+    let byteArrayIndex = 0;
+
+    return JSON.stringify(args, argReplacer);
+
+    function argReplacer(key: string, value: any) {
+      if (value instanceof DotNetObject) {
+        return value.serializeAsArg();
+      } else if (value instanceof Uint8Array) {
+        dotNetDispatcher!.supplyByteArray(byteArrayIndex, value);
+        const jsonValue = { [byteArrayRefKey]: byteArrayIndex };
+        byteArrayIndex++;
+        return jsonValue;
+      }
+
+      return value;
+    }
   }
 }