Vorschau eines eingefügten lokalen Bildes/Videos in der Blazor-Server-App, ohne es auf den Server hochzuladen ⇐ C#

[Guest]

Ich versuche, eine Upload-Komponente zu erstellen, die eine Vorschau eines Videos oder Bilds anzeigt, bevor es tatsächlich hochgeladen wird.

Code: Select all

Video

Code: Select all

int videoProgress = 0;
List videos = default!;
FileInfo? video;
string? videoUrl;
private async Task OnVideoCompletedAsync(IEnumerable _videos) {
videos = _videos.ToList();
Console.WriteLine($"[EVENT] Video Dropped : {videos.Count()}");
videos.ForEach(x => Console.WriteLine($"Name: {x.Name}, Size: {x.Size/1000000f} mb"));
video = videos[0].LocalFile;
videoUrl = await embedFiles(video, "video/mp4");
videoProgress = 0;
StateHasChanged();
}

private async Task embedFiles(FileInfo? fileInfo, string format) {
if(fileInfo == null) {
return null;
}
byte[] bytes = new byte[fileInfo.Length];
using(FileStream fileStream = fileInfo.OpenRead()) {
await fileStream.ReadAsync(bytes);
}
string url = await JSRuntime.InvokeAsync("bytesToDataURL", bytes, format);
Console.WriteLine($"[INFO] File URLs : {url}");
return url;
}

Code: Select all

async function bytesToDataURL(bytes, format) {
const blob = new Blob([new Uint8Array(bytes)], format);
let url = URL.createObjectURL(blob);
console.log(url);
return url;
}

Aber wenn ich das richtig verstehe, wird das Video auf den Server hochgeladen und müsste es dann als Bytes an den Client zurücksenden, damit dieser die Blob-URL erstellen kann. Für kleinere Dateien ist das in Ordnung, aber ich finde, dass dieses Hin- und Hergehen verschwenderisch ist, wenn Sie sehr große Dateien haben. Ich könnte einen Event-Handler direkt an FluentInputFile in JS anhängen, aber das würde die eigentlichen Event-Handler stören.