Vorschau eines eingefügten lokalen Bildes/Videos in der Blazor-Server-App, ohne es auf den Server hochzuladen
Posted: 24 Dec 2024, 17:46
Ich versuche, eine Upload-Komponente zu erstellen, die eine Vorschau eines Videos oder Bilds anzeigt, bevor es tatsächlich hochgeladen wird.
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.
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;
}