Blazor Server Large File Upload Support (#33900)

* Prototype Large File Upload Support Blazor

* Blob.slice Implementation

* Allow WASM to keep working

* Update CircuitStreamingInterop.ts

* PR Feedback

* Cleanup

* PR Feedback

Author: TanayParikh

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -1,4 +1,3 @@
-
 export const InputFile = {
   init,
   toImageFile,
@@ -14,6 +13,7 @@ interface BrowserFile {
   contentType: string;
   readPromise: Promise<ArrayBuffer> | undefined;
   arrayBuffer: ArrayBuffer | undefined;
+  blob: Blob;
 }
 
 export interface InputElement extends HTMLInputElement {
@@ -33,7 +33,7 @@ function init(callbackWrapper: any, elem: InputElement): void {
     // Reduce to purely serializable data, plus an index by ID.
     elem._blazorFilesById = {};
 
-    const fileList = Array.prototype.map.call(elem.files, function(file): BrowserFile {
+    const fileList = Array.prototype.map.call(elem.files, function(file: File): BrowserFile {
       const result = {
         id: ++elem._blazorInputFileNextFileId,
         lastModified: new Date(file.lastModified).toISOString(),
@@ -42,13 +42,11 @@ function init(callbackWrapper: any, elem: InputElement): void {
         contentType: file.type,
         readPromise: undefined,
         arrayBuffer: undefined,
+        blob: file,
       };
 
       elem._blazorFilesById[result.id] = result;
 
-      // Attach the blob data itself as a non-enumerable property so it doesn't appear in the JSON.
-      Object.defineProperty(result, 'blob', { value: file });
-
       return result;
     });
 
@@ -78,6 +76,7 @@ async function toImageFile(elem: InputElement, fileId: number, format: string, m
     canvas.getContext('2d')?.drawImage(loadedImage, 0, 0, canvas.width, canvas.height);
     canvas.toBlob(resolve, format);
   });
+
   const result: BrowserFile = {
     id: ++elem._blazorInputFileNextFileId,
     lastModified: originalFile.lastModified,
@@ -86,13 +85,11 @@ async function toImageFile(elem: InputElement, fileId: number, format: string, m
     contentType: format,
     readPromise: undefined,
     arrayBuffer: undefined,
+    blob: resizedImageBlob ? resizedImageBlob : originalFile.blob,
   };
 
   elem._blazorFilesById[result.id] = result;
 
-  // Attach the blob data itself as a non-enumerable property so it doesn't appear in the JSON.
-  Object.defineProperty(result, 'blob', { value: resizedImageBlob });
-
   return result;
 }
 
@@ -101,9 +98,9 @@ async function ensureArrayBufferReadyForSharedMemoryInterop(elem: InputElement,
   getFileById(elem, fileId).arrayBuffer = arrayBuffer;
 }
 
-async function readFileData(elem: InputElement, fileId: number): Promise<Uint8Array> {
-  const arrayBuffer = await getArrayBufferFromFileAsync(elem, fileId);
-  return new Uint8Array(arrayBuffer);
+async function readFileData(elem: InputElement, fileId: number): Promise<Blob> {
+  const file = getFileById(elem, fileId);
+  return file.blob;
 }
 
 export function getFileById(elem: InputElement, fileId: number): BrowserFile {
@@ -129,7 +126,7 @@ function getArrayBufferFromFileAsync(elem: InputElement, fileId: number): Promis
       reader.onerror = function(err): void {
         reject(err);
       };
-      reader.readAsArrayBuffer(file['blob']);
+      reader.readAsArrayBuffer(file.blob);
     });
   }
 

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -1,6 +1,6 @@
 import { HubConnection } from '@microsoft/signalr';
 
-export function sendJSDataStream(connection: HubConnection, data: ArrayBufferView, streamId: string, chunkSize: number) {
+export function sendJSDataStream(connection: HubConnection, data: ArrayBufferView | Blob, streamId: string, chunkSize: number) {
     // Run the rest in the background, without delaying the completion of the call to sendJSDataStream
     // otherwise we'll deadlock (.NET can't begin reading until this completes, but it won't complete
     // because nobody's reading the pipe)
@@ -9,12 +9,13 @@ export function sendJSDataStream(connection: HubConnection, data: ArrayBufferVie
         let numChunksUntilNextAck = 5;
         let lastAckTime = new Date().valueOf();
         try {
+            const byteLength = data instanceof Blob ? data.size : data.byteLength;
             let position = 0;
             let chunkId = 0;
 
-            while (position < data.byteLength) {
-                const nextChunkSize = Math.min(chunkSize, data.byteLength - position);
-                const nextChunkData = new Uint8Array(data.buffer, data.byteOffset + position, nextChunkSize);
+            while (position < byteLength) {
+                const nextChunkSize = Math.min(chunkSize, byteLength - position);
+                const nextChunkData = await getNextChunk(data, position, nextChunkSize);
 
                 numChunksUntilNextAck--;
                 if (numChunksUntilNextAck > 1) {
@@ -49,3 +50,23 @@ export function sendJSDataStream(connection: HubConnection, data: ArrayBufferVie
         }
     }, 0);
 };
+
+async function getNextChunk(data: ArrayBufferView | Blob, position: number, nextChunkSize: number): Promise<Uint8Array> {
+    if (data instanceof Blob) {
+        return await getChunkFromBlob(data, position, nextChunkSize);
+    } else {
+        return getChunkFromArrayBufferView(data, position, nextChunkSize);
+    }
+}
+
+async function getChunkFromBlob(data: Blob, position: number, nextChunkSize: number): Promise<Uint8Array> {
+    const chunkBlob = data.slice(position, position + nextChunkSize);
+    const arrayBuffer = await chunkBlob.arrayBuffer();
+    const nextChunkData = new Uint8Array(arrayBuffer);
+    return nextChunkData;
+}
+
+function getChunkFromArrayBufferView(data: ArrayBufferView, position: number, nextChunkSize: number) {
+    const nextChunkData = new Uint8Array(data.buffer, data.byteOffset + position, nextChunkSize);
+    return nextChunkData;
+}

src/Components/Web.JS/src/InputFile.ts

@@ -53,13 +53,8 @@ public override Task<int> ReadAsync(byte[] buffer, int offset, int count, Cancel
 
         public override async ValueTask<int> ReadAsync(Memory<byte> buffer, CancellationToken cancellationToken = default)
         {
-            int maxBytesToRead = (int)(Length - Position);
-
-            if (maxBytesToRead > buffer.Length)
-            {
-                maxBytesToRead = buffer.Length;
-            }
-
+            var bytesAvailableToRead = Length - Position;
+            var maxBytesToRead = (int)Math.Min(bytesAvailableToRead, buffer.Length);
             if (maxBytesToRead <= 0)
             {
                 return 0;

src/Components/Web.JS/src/Platform/Circuits/CircuitStreamingInterop.ts

@@ -10,8 +10,7 @@ export module DotNet {
   class JSObject {
     _cachedFunctions: Map<string, Function>;
 
-    constructor(private _jsObject: any)
-    {
+    constructor(private _jsObject: any) {
       this._cachedFunctions = new Map<string, Function>();
     }
 
@@ -142,28 +141,40 @@ export module DotNet {
   /**
    * Creates a JavaScript data reference that can be passed to .NET via interop calls.
    *
-   * @param arrayBufferView The ArrayBufferView used to create the JavaScript stream reference.
+   * @param streamReference The ArrayBufferView or Blob used to create the JavaScript stream reference.
    * @returns The JavaScript data reference (this will be the same instance as the given object).
    * @throws Error if the given value is not an Object or doesn't have a valid byteLength.
    */
-  export function createJSStreamReference(arrayBufferView: ArrayBufferView | any): any {
-    // Check if this is an ArrayBufferView, and if it has a valid byteLength for transfer
-    // using a JSStreamReference.
-    if (!(arrayBufferView.buffer instanceof ArrayBuffer)) {
-      throw new Error(`Cannot create a JSStreamReference from the value '${arrayBufferView}' as it is not have a 'buffer' property of type 'ArrayBuffer'.`);
-    } else if (arrayBufferView.byteLength === undefined) {
-      throw new Error(`Cannot create a JSStreamReference from the value '${arrayBufferView}' as it doesn't have a byteLength.`);
+  export function createJSStreamReference(streamReference: ArrayBuffer | ArrayBufferView | Blob | any): any {
+    let length = -1;
+
+    // If we're given a raw Array Buffer, we interpret it as a `Uint8Array` as
+    // ArrayBuffers' aren't directly readable.
+    if (streamReference instanceof ArrayBuffer) {
+      streamReference = new Uint8Array(streamReference);
+    }
+
+    if (streamReference instanceof Blob) {
+      length = streamReference.size;
+    } else if (streamReference.buffer instanceof ArrayBuffer) {
+      if (streamReference.byteLength === undefined) {
+        throw new Error(`Cannot create a JSStreamReference from the value '${streamReference}' as it doesn't have a byteLength.`);
+      }
+
+      length = streamReference.byteLength;
+    } else {
+      throw new Error('Supplied value is not a typed array or blob.');
     }
 
     const result: any = {
-      [jsStreamReferenceLengthKey]: arrayBufferView.byteLength,
+      [jsStreamReferenceLengthKey]: length,
     }
 
     try {
-      const jsObjectReference = createJSObjectReference(arrayBufferView);
+      const jsObjectReference = createJSObjectReference(streamReference);
       result[jsObjectIdKey] = jsObjectReference[jsObjectIdKey];
     } catch {
-      throw new Error(`Cannot create a JSStreamReference from the value '${arrayBufferView}'.`);
+      throw new Error(`Cannot create a JSStreamReference from the value '${streamReference}'.`);
     }
 
     return result;