Added Support for Slice and SliceAsync.

Author: KristofferStrube

samples/KristofferStrube.Blazor.FileAPI.WasmExample/Pages/Slice.razor

@@ -0,0 +1,46 @@
+@page "/Slice"
+@inject IJSRuntime JSRuntime
+
+<PageTitle>FileAPI - Slice</PageTitle>
+
+<h2>Slicing a Blob</h2>
+Here we can see how we can slice a <code>Blob</code>. We construct a <code>Blob</code> with the numbers from 0 to 49 encoded as bytes.
+<br />
+<div>
+    <b>Slice(20, 30):</b> @slice20_30
+</div>
+<div>
+    <b>SliceAsync(end: 20):</b> @slice_end_10
+</div>
+<div>
+    <b>SliceAsync(start: 40):</b> @slice_start_40
+</div>
+<div>
+    <b>SliceAsync(10, 20, "text/csv"):</b> @slice_start_40 with content type @slice10_20ContentType
+</div>
+
+
+@code {
+    string slice20_30 = "";
+    string slice_end_10 = "";
+    string slice_start_40 = "";
+    string slice10_20 = "";
+    string slice10_20ContentType = "";
+
+    protected override async Task OnInitializedAsync()
+    {
+        var blob = await BlobInProcess.CreateAsync(
+            JSRuntime,
+            blobParts: new BlobPart[] { new(Enumerable.Range(0, 50).Select(i => (byte)i).ToArray()) },
+            options: new() { Type = "text/plain" }
+        );
+
+        slice20_30 = string.Join(",", (await (blob.Slice(20, 30)).ArrayBufferAsync()).Select(b => b.ToString()));
+        slice_end_10 = string.Join(",", (await (await blob.SliceAsync(end: 10)).ArrayBufferAsync()).Select(b => b.ToString()));
+        slice_start_40 = string.Join(",", (await (await blob.SliceAsync(start: 40)).ArrayBufferAsync()).Select(b => b.ToString()));
+
+        var slice = await blob.SliceAsync(10, 20, "text/csv");
+        slice10_20 = string.Join(",", (await slice.ArrayBufferAsync()).Select(b => b.ToString()));
+        slice10_20ContentType = await slice.GetTypeAsync();
+    }
+}

samples/KristofferStrube.Blazor.FileAPI.WasmExample/Pages/Status.razor

@@ -23,7 +23,7 @@
         StateHasChanged();
     }
 
-    private (int start, int end)[] supportedRows = new (int start, int end)[] { (0, 7), (12, 39), (47, 64), (77, 77), (90, 94) };
+    private (int start, int end)[] supportedRows = new (int start, int end)[] { (0, 39), (47, 64), (77, 77), (90, 94) };
 
     private const string webIDL = @"[Exposed=(Window,Worker), Serializable]
 interface Blob {

samples/KristofferStrube.Blazor.FileAPI.WasmExample/Shared/NavMenu.razor

@@ -14,6 +14,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="Slice">
+                <span class="oi oi-crop" aria-hidden="true"></span> Slice
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="Status">
                 <span class="oi oi-warning" aria-hidden="true"></span> API Coverage Status

src/KristofferStrube.Blazor.FileAPI/Blob.InProcess.cs

@@ -1,4 +1,5 @@
-using Microsoft.JSInterop;
+using KristofferStrube.Blazor.Streams;
+using Microsoft.JSInterop;
 
 namespace KristofferStrube.Blazor.FileAPI;
 
@@ -66,4 +67,12 @@ internal BlobInProcess(IJSRuntime jSRuntime, IJSInProcessObjectReference inProce
     /// </summary>
     /// <returns>The MIME type of this blob.</returns>
     public string Type => inProcessHelper.Invoke<string>("getAttribute", JSReference, "type");
+
+    public Blob Slice(long? start = null, long? end = null, string? contentType = null)
+    {
+        start ??= 0;
+        end ??= (long)Size;
+        IJSObjectReference jSInstance = JSReference.Invoke<IJSObjectReference>("slice", start, end, contentType);
+        return new Blob(jSRuntime, jSInstance);
+    }
 }

src/KristofferStrube.Blazor.FileAPI/Blob.cs

@@ -67,6 +67,14 @@ public async Task<string> GetTypeAsync()
         return await helper.InvokeAsync<string>("getAttribute", JSReference, "type");
     }
 
+    public async Task<Blob> SliceAsync(long? start = null, long? end = null, string? contentType = null)
+    {
+        start ??= 0;
+        end ??= (long)await GetSizeAsync();
+        IJSObjectReference jSInstance = await JSReference.InvokeAsync<IJSObjectReference>("slice", start, end, contentType);
+        return new Blob(jSRuntime, jSInstance);
+    }
+
     public async Task<ReadableStream> StreamAsync()
     {
         IJSObjectReference jSInstance = await JSReference.InvokeAsync<IJSObjectReference>("stream");
@@ -94,7 +102,8 @@ public async Task<string> TextAsync()
     /// <returns>All bytes in the blob.</returns>
     public async Task<byte[]> ArrayBufferAsync()
     {
+        IJSInProcessObjectReference jSInstance = await JSReference.InvokeAsync<IJSInProcessObjectReference>("arrayBuffer");
         IJSObjectReference helper = await helperTask.Value;
-        return await helper.InvokeAsync<byte[]>("arrayBuffer", JSReference);
+        return await helper.InvokeAsync<byte[]>("arrayBuffer", jSInstance);
     }
 }

src/KristofferStrube.Blazor.FileAPI/KristofferStrube.Blazor.FileAPI.csproj

@@ -23,7 +23,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="KristofferStrube.Blazor.Streams" Version="0.1.0" />
+    <PackageReference Include="KristofferStrube.Blazor.Streams" Version="0.2.*" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.*" />
   </ItemGroup>
 

src/KristofferStrube.Blazor.FileAPI/wwwroot/KristofferStrube.Blazor.FileAPI.js

@@ -1,7 +1,6 @@
 export function getAttribute(object, attribute) { return object[attribute]; }
 
-export async function arrayBuffer(blob) {
-    var buffer = await blob.arrayBuffer();
+export async function arrayBuffer(buffer) {
     var bytes = new Uint8Array(buffer);
     return bytes;
 }