Skip to content

Commit 0955eda

Browse files
KristofferStrubeKristofferStrube
committed
Updated sample project to use new event listener methods for FileReader demo.
1 parent c67ff25 commit 0955eda

File tree

2 files changed

+56
-34
lines changed

2 files changed

+56
-34
lines changed

‎samples/KristofferStrube.Blazor.FileAPI.WasmExample/Pages/FileReaderSample.razor‎

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -46,62 +46,78 @@ We then use the methods of the <code>FileReader</code> interface to read the <co
4646
}
4747

4848

49-
private async Task GetProgressAsync(ProgressEvent eventArgs, string prepend)
49+
private async Task GetProgressAsync(ProgressEvent eventArgs)
5050
{
5151
var progress = await eventArgs.GetLengthComputableAsync() ? $"({await eventArgs.GetLoadedAsync()}/{await eventArgs.GetTotalAsync()})" : "";
52-
log += $"{prepend}: {progress}\n";
52+
var type = await eventArgs.GetTypeAsync();
53+
log += $"{type}: {progress}\n";
5354
StateHasChanged();
5455
}
5556

5657
public async Task ReadAsArrayBufferAsync()
5758
{
5859
log = "";
5960
var fileReader = await FileReader.CreateAsync(JSRuntime);
60-
fileReader.OnLoadStart = async (e) => await GetProgressAsync(e, "OnLoadStart");
61-
fileReader.OnProgress = async (e) => await GetProgressAsync(e, "OnProgress");
62-
fileReader.OnLoad = async (e) => await GetProgressAsync(e, "OnLoad");
63-
fileReader.OnAbort = async (e) => await GetProgressAsync(e, "OnAbort");
64-
fileReader.OnError = async (e) => await GetProgressAsync(e, "OnError");
65-
fileReader.OnLoadEnd = async (e) =>
61+
62+
await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
63+
await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
6664
{
6765
imageUrl = "data:image/png;base64," + Convert.ToBase64String(await fileReader.GetResultAsByteArrayAsync() ?? new byte[0]);
68-
await GetProgressAsync(e, "OnLoadEnd");
69-
};
66+
await GetProgressAsync(e);
67+
});
68+
69+
await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
70+
await fileReader.AddOnProgressEventListenerAsync(eventListener);
71+
await fileReader.AddOnLoadEventListenerAsync(eventListener);
72+
await fileReader.AddOnAbortEventListenerAsync(eventListener);
73+
await fileReader.AddOnErrorEventListenerAsync(eventListener);
74+
await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);
75+
7076
await fileReader.ReadAsArrayBufferAsync(blob!);
7177
}
7278

7379
public async Task ReadAsArrayBufferInProcessAsync()
7480
{
7581
log = "";
7682
var fileReader = await FileReaderInProcess.CreateAsync(JSRuntime);
77-
fileReader.OnLoadStart = (e) => GetProgress(e, "OnLoadStart");
78-
fileReader.OnProgress = (e) => GetProgress(e, "OnProgress");
79-
fileReader.OnLoad = (e) => GetProgress(e, "OnLoad");
80-
fileReader.OnAbort = (e) => GetProgress(e, "OnAbort");
81-
fileReader.OnError = (e) => GetProgress(e, "OnError");
82-
fileReader.OnLoadEnd = (e) =>
83+
84+
await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
85+
await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
8386
{
8487
imageUrl = "data:image/png;base64," + Convert.ToBase64String(fileReader.ResultAsByteArray ?? new byte[0]);
85-
GetProgress(e, "OnLoadEnd");
86-
};
88+
await GetProgressAsync(e);
89+
});
90+
91+
await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
92+
await fileReader.AddOnProgressEventListenerAsync(eventListener);
93+
await fileReader.AddOnLoadEventListenerAsync(eventListener);
94+
await fileReader.AddOnAbortEventListenerAsync(eventListener);
95+
await fileReader.AddOnErrorEventListenerAsync(eventListener);
96+
await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);
97+
8798
fileReader.ReadAsArrayBuffer(blob!);
8899
}
89100

90101
public async Task ReadAsBinaryStringAsync()
91102
{
92103
log = "";
93104
var fileReader = await FileReader.CreateAsync(JSRuntime);
94-
fileReader.OnLoadStart = async (e) => await GetProgressAsync(e, "OnLoadStart");
95-
fileReader.OnProgress = async (e) => await GetProgressAsync(e, "OnProgress");
96-
fileReader.OnLoad = async (e) => await GetProgressAsync(e, "OnLoad");
97-
fileReader.OnAbort = async (e) => await GetProgressAsync(e, "OnAbort");
98-
fileReader.OnError = async (e) => await GetProgressAsync(e, "OnError");
99-
fileReader.OnLoadEnd = async (e) =>
105+
106+
await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
107+
await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
100108
{
101109
var bytes = (await fileReader.GetResultAsStringAsync() ?? "").Select(c => (byte)c).ToArray();
102110
imageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
103-
await GetProgressAsync(e, "OnLoadEnd");
104-
};
111+
await GetProgressAsync(e);
112+
});
113+
114+
await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
115+
await fileReader.AddOnProgressEventListenerAsync(eventListener);
116+
await fileReader.AddOnLoadEventListenerAsync(eventListener);
117+
await fileReader.AddOnAbortEventListenerAsync(eventListener);
118+
await fileReader.AddOnErrorEventListenerAsync(eventListener);
119+
await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);
120+
105121
await fileReader.ReadAsBinaryStringAsync(blob!);
106122
}
107123

@@ -116,16 +132,21 @@ We then use the methods of the <code>FileReader</code> interface to read the <co
116132
{
117133
log = "";
118134
var fileReader = await FileReader.CreateAsync(JSRuntime);
119-
fileReader.OnLoadStart = async (e) => await GetProgressAsync(e, "OnLoadStart");
120-
fileReader.OnProgress = async (e) => await GetProgressAsync(e, "OnProgress");
121-
fileReader.OnLoad = async (e) => await GetProgressAsync(e, "OnLoad");
122-
fileReader.OnAbort = async (e) => await GetProgressAsync(e, "OnAbort");
123-
fileReader.OnError = async (e) => await GetProgressAsync(e, "OnError");
124-
fileReader.OnLoadEnd = async (e) =>
135+
136+
await using var eventListener = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, GetProgressAsync);
137+
await using var loadEndEventLister = await EventListener<ProgressEvent>.CreateAsync(JSRuntime, async e =>
125138
{
126139
imageUrl = await fileReader.GetResultAsStringAsync() ?? "";
127-
await GetProgressAsync(e, "OnLoadEnd");
128-
};
140+
await GetProgressAsync(e);
141+
});
142+
143+
await fileReader.AddOnLoadStartEventListenerAsync(eventListener);
144+
await fileReader.AddOnProgressEventListenerAsync(eventListener);
145+
await fileReader.AddOnLoadEventListenerAsync(eventListener);
146+
await fileReader.AddOnAbortEventListenerAsync(eventListener);
147+
await fileReader.AddOnErrorEventListenerAsync(eventListener);
148+
await fileReader.AddOnLoadEndEventListenerAsync(loadEndEventLister);
149+
129150
await fileReader.ReadAsDataURLAsync(blob!);
130151
}
131152

‎samples/KristofferStrube.Blazor.FileAPI.WasmExample/_Imports.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
@using Microsoft.AspNetCore.Components.Web.Virtualization
77
@using Microsoft.AspNetCore.Components.WebAssembly.Http
88
@using Microsoft.JSInterop
9+
@using KristofferStrube.Blazor.DOM
910
@using KristofferStrube.Blazor.FileAPI.WasmExample
1011
@using KristofferStrube.Blazor.FileAPI.WasmExample.Shared

0 commit comments

Comments
 (0)